延遲加載 Lazy Load

延遲加載延遲加載長網頁中的圖像。在用戶滾動到視口之前，視口外的圖像將不會被加載。這與圖像預加載相反。

這是原始Lazy Load插件的現代香草JavaScript版本。它使用Intersection Observer API來觀察圖像何時進入瀏覽器視口。原始代碼受Matt Mlinac的YUI ImageLoader實用程序的啓發。新版本大量來自Dean Hume 的博客文章。

對於那些匆忙有幾個演示頁面：基本選項，包含許多圖像的頁面和使用超時加載圖像。

基本用法

默認情況下，Lazy Load假定可以在data-src屬性中找到原始高分辨率圖像的URL 。您還可以在src屬性中包含可選的低分辨率佔位符。

<img class="lazyload" data-src="img/example.jpg" width="765" height="574">
<img class="lazyload" src="img/example-thumb.jpg" data-src="img/example.jpg" width="765" height="574">

隨着HTML的到位，您可以使用工廠方法初始化插件。如果你沒有傳遞任何設置或圖像元素，它將延遲加載所有圖像的類lazyload。

lazyload();

如果你喜歡，你可以明確地將圖像元素傳遞給工廠。例如，如果您使用不同的類名稱，請使用此選項。

let images = document.querySelectorAll(".branwdo");
lazyload(images);

如果你喜歡，你也可以使用普通的舊構造函數。

let images = document.querySelectorAll(".branwdo");
new LazyLoad(images);

額外的API

要使用額外的API，您需要將插件實例分配給一個變量。

let lazy = lazyload();

強制加載所有圖像使用loadimages()。

lazy->loadImages();

銷燬插件並停止使用懶惰destroy()。

lazy->destroy();

請注意，destroy()不會加載視口圖像。如果你還想加載圖片使用loadAndDestroy()。

lazy->loadAndDestroy();

使用jQuery包裝器無法使用其他API。

jQuery包裝

如果您使用jQuery，那麼您可以使用熟悉的舊語法的包裝器。請注意，提供data-original默認情況下使用BC 。這應該是對插件以前版本的替代。

<img class="lazyload" data-original="img/example.jpg" width="765" height="574">
<img class="lazyload" src="img/example-thumb.jpg" data-original="img/example.jpg" width="765" height="574">

$("img.lazyload").lazyload();

食譜

模糊圖像

低分辨率佔位符即。“模糊”技術。您可以在此博客條目中看到此操作。向下滾動以查看模糊圖像。

<img class="lazyload"
     src="thumbnail.jpg"
     data-src="original.jpg"
     width="1024" height="768" />

<div class="lazyload"
     style="background-image: url('thumbnail.jpg')"
     data-src="original.jpg" />

響應式圖像

Lazyloaded Responsive圖像通過支持data-srcset。如果瀏覽器不支持srcset並且沒有填充圖片，data-src則會顯示圖片。

<img class="lazyload"
     src="thumbnail.jpg"
     data-src="large.jpg"
     data-srcset="small.jpg 480w, medium.jpg 640w, large.jpg 1024w"
     width="1024" height="768" />

<img class="lazyload"
     src="thumbnail.jpg"
     data-src="normal.jpg"
     data-srcset="normal.jpg 1x, retina.jpg 2x"
     width="1024" height="768" />

內嵌的佔位符圖像

爲了減少請求數量，您可以使用數據uri圖像作爲佔位符。

<img src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs="
     data-src="original.jpg"
     width="1024" height="768" />

安裝

這仍在進行中。目前還沒有發佈。同時你可以使用rawgit。

$ wget https://rawgit.com/tuupola/jquery_lazyload/2.x/lazyload.js