本文參閱http://www.appelsiini.net/projects/lazyload
Javascript Lazyload延遲載入特效,有效降低HTPP連線次數，提高首屏載入時間
1、增加了圖片預載入可選
2、修改了圖片本身就在可視範圍的時候直接顯示而不需要滾動條觸發
3、修改了Splice刪除陣列的時候，會跳過下一張圖片BUG
4、瀏覽器視窗resize的時候圖片出現也會載入
5、判斷圖片父層包裹頂部或者底部出現在可視範圍內即可顯示圖片
我們來看看官方的介紹，我拷貝過來並且翻譯了一部分：
Lazy Load is delays loading of images in long web pages. Images outside of viewport are not loaded until user scrolls to them. This is opposite of image preloading.
Using Lazy Load on long web pages will make the page load faster. In some cases it can also help to reduce server load.
Plugin is inspired by YUI ImageLoader Utility by Matt Mlinac.
延遲載入在長網頁圖片的延遲載入。影象視窗不載入,直到使用者以外的卷軸。這是相反的影象預載入。
在長時間使用延遲載入web頁面將使頁面載入速度更快。在某些情況下,它也可以幫助減少伺服器負載。
外掛是由馬特Mlinac受YUI ImageLoader效用。
For those in hurry there are several demo pages: basic options, with fadein effect, noscript fallback, horizontal scrolling, horizontal scrolling inside container, vertical scrolling inside container, page with gazillion images, load images using timeout and load images using AJAX(H).
When checking the demos clear browser cache between each request. You can check what is actually loaded with developers console (Chrome, Safari and IE) or FireBug (Firefox).
這裡點有幾個演示頁:基本選項,與漸顯效果,noscript撤退,水平滾動,水平滾動容器內,容器內垂直滾動,與無數圖片頁面,使用AJAX載入影象使用超時和載入影象(H)。
當檢查每個請求之間的演示清除瀏覽器快取。您可以檢查實際裝載與開發人員控制檯(Safari和Chrome IE)或FireBug(Firefox)。
Lazy Load depends on Jquery. Include them both in end of your HTML code:
延遲載入取決於Jquery。包括他們在結束你的HTML程式碼:
<script src="jquery.js"></script>
<script src="jquery.lazyload.js"></script>
You must alter your image tags. Address of the image must be put into data-originalattribute. Give lazy loaded images a specific class. This way you can easily control which images plugin is binded to.
你必須改變你的影象標記。影象的地址必須放入data-original屬性。給懶載入影象一個特定的類。這樣你可以很容易地控制哪些圖片外掛繫結。
<img class="lazy" data-original="img/example.jpg" width="640" height="480">
$(function() {
$("img.lazy").lazyload();
});
Setting Threshold
設定閾值
By default images are loaded when they appear on the screen. If you want images to load earlier use threshold parameter. Setting threshold to 200 causes image to load 200 pixels before it appears on viewport.
預設載入圖片時出現在螢幕上。如果你想要圖片載入之前使用閾值引數。閾值設定為200年導致影象載入之前出現在視窗200畫素。
$("img.lazy").lazyload({
threshold : 200
});
Event to Trigger Loading
事件觸發載入
You can use jQuery event such as click or mouseover. You can also use custom events such as sporty or foobar. Default is to wait until user scrolls down and image appears on the viewport. To load images only when user clicks them you could do:
您可以使用jQuery點選或滑鼠懸停等事件。您還可以使用定製的事件,如運動或foobar。預設是等到使用者向下滾動和形象出現在視窗。載入圖片只有當用戶點選他們你可以:
$("img.lazy").lazyload({
event : "click"
});
Using Effects
使用效果
By default plugin waits for image to fully load and calls show(). You can use any effect you want. Following code uses fadeIn effect. Check how it works at effect demo p
預設外掛等待形象完全載入和呼叫顯示()。你可以使用任何你想要的效果。下面的程式碼使用漸顯效果。這是演示頁面。
$("img.lazy").lazyload({
effect : "fadeIn"
});
Images Inside Container
圖片內容器
You can also use plugin for images inside scrolling container, such as div with scrollbar. Just pass the container as jQuery object. There is a demo for horizonta and vertical container.
您還可以使用外掛的圖片滾動容器內部,比如div滾動條。只是通過jQuery物件的容器。有一個演示臥式鍛機和垂直容器。
#container {
height: 600px;
overflow: scroll;
}
$("img.lazy").lazyload({
container: $("#container")
});
When Images Are Not Sequential
當影象並不是連續的
After scrolling page plugin loops though unloaded images. Loop checks if image has become visible. By default loop is stopped when first image outside viewport is found. This is based on following assumption. Order of images on page is same as order of images in HTML code. With some layouts assumption this might be wrong. You can control loading behaviour with failure_limit setting.
滾動頁面外掛後迴圈雖然解除安裝圖片。迴圈檢查圖片是否在可視區域。預設時停止迴圈以外的首家形象視窗。這是基於以下的假設。圖片在頁面的次序是HTML程式碼相同圖片的順序。與一些佈局中,這樣的假設是錯誤的。你可以控制failure_limit設定載入行為。
$("img.lazy").lazyload({
failure_limit : 10
});
Dealing With Invisible Images
處理不可見的影象
There are cases when you have images which are in viewport but not :visible. To improve performance you can ignore .not(":visible") images.
在某些情況下當你有圖片的視窗而不是:可見。以提高效能可以忽略自身之外(":可見")影象。
$("img.lazy").lazyload({
skip_invisible : true
});