Home » jQuery 外掛

[jQ]waitForImages 1.4

[ 日期： | 瀏覽：5,260 | 迴響：搶沙發 ]
範例 1
請協助我把這個效果加到我的網站 (只要 600 元)
沒錯!只要 600 元就能獲得我們團隊完整的協助，讓效果能迅速的整合到您的網站，並保證瀏覽器的相容性。
立刻申請!



是否有時需要在整個網站的圖片載入完後執行某個動作呢？waitForImages 透過設定的方式來決定每張圖片載完要執行的動作或是可以在全部圖片都載完時執行某動作。

套件名稱：waitForImages
套件版本：1.4
作者網站：https://github.com/alexanderdickson/waitForImages
套件網址：N/A
發佈日期：2012-01-10
檔案大小：4.98 KB
檔案下載：jquery.waitforimages.js

參數選項說明：

檢視原始碼 JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

finishedCallback(選填)
描述： 當全部都載完時要執行的動作
預設值： $.noop()
 
eachCallback(選填)
描述： 當每一個載完時要執行的動作
預設值： $.noop()
 
waitForAll(選填)
描述： 是否等全部載完
預設值： false
 
finished(選填)
描述： 當全部都載完時要執行的動作
預設值： $.noop()
 
each(選填)
描述： 當每一個載完時要執行的動作
預設值： $.noop()
 
waitForAll(選填)
描述： 是否等全部載完
預設值： false

方法說明：

檢視原始碼 JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13

// 預設要利用 waitForImages 來載入那些 css 屬性中的圖片
$.waitForImages.hasImageProperties = [
	'backgroundImage',
	'listStyleImage',
	'borderImage',
	'borderCornerImage'
];
 
// 讓指定元素內的圖片或是屬於 $.waitForImages.hasImageProperties 屬性中的圖片加入 waitForImages 效果
$(selector).waitForImages(finishedCallback, eachCallback, waitForAll);
 
// 讓指定元素內的圖片或是屬於 $.waitForImages.hasImageProperties 屬性中的圖片加入 waitForImages 效果
$(selector).waitForImages(options);

使用範例：

檢視原始碼 JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.waitforimages.js"></script>
<style type="text/css">
	.loaded {
		border: 1px solid #ddd;
		margin: 5px;
		padding: 5px;
	}
</style>
<script type="text/javascript">
	$(function(){
		// 讓 body 中的圖片能全部載完後, 執行某動作
		// 每載入一次就加上 .loaded 樣式
		$('body').waitForImages({
			waitForAll: true, 
			each: function(loaded, count, success) {
			   $('.log').html(loaded + ' / ' + count + ' 張圖片 ' + (success ? '載入成功' : '載入失敗') +  '.');
			   $(this).addClass('loaded');
			}, 
			finished: function() {
				alert('全部圖片都已經載入完畢.');
			}
		});
	});
</script>
 
<body>
	<div class="log"></div>
	<img src="images/2012TaipeiCartShow_01.jpg" />
	<img src="images/2012TaipeiCartShow_02.jpg" />
	<img src="images/2012TaipeiCartShow_03.jpg" />
	<img src="images/2012TaipeiCartShow_07.jpg" />	
</body>
範例 1

檔案描述
基本的範例檔案(免空) 開始下載
基本的範例檔案 會員限定

發表迴響