帶型帶秀專題之 Lazy Load (一)

wangzy2019 發布于2019-08-21 17:23 / 3284人閱讀

摘要：今天開始帶型帶秀專題。專題第二節會深入到源碼。在可視圖片加載后，瀏覽器將處于就緒狀態。只需要將該容器元素作為對象傳遞。默認地，循環會在找到第一個視口外的圖像時停止。但是某些頁面的布局不符合該假設。最差的情況是該值為實際圖片的數量。

今天開始帶型帶秀專題 -- Lazy Load。先從使用比較廣泛的 jQuery Lazy Load 插件開始，逐步深入。該插件已經開發到了第二版，有興趣的同學可以去看一看。專題第二節會深入到源碼。

Lazy Load Plugin for jQuery

Github 地址

Lazy Load用于延遲加載圖片。它會延遲加載視口外的圖片，直到用戶滾動頁面使其出現。與圖片預加載正好相反。

在包含許多大圖片的長頁面上使用Lazy Load可使頁面加載速度更快。在可視圖片加載后，瀏覽器將處于就緒狀態。某些情況下也可幫助服務器減少負載。

Lazy Load啟發于 Matt Mlinac 的 YUI ImageLoader。

這里有幾個demo可以讓你快速體驗：basic options, with fadein effect, noscript fallback, page with gazillion images and load images using timeout.

注意！查看新的demo時清除緩存。你可以使用開發者工具（Chrome，Safari IE）或Firebug（Firefox）查看頁面實際加載的內容。

? 用法

Lazy Load依賴于jQuery，在HTML中將其引入。

引入腳本后，你還需要改變img元素的的HTML代碼。添加data-original屬性，其值為所要加載圖片的URL。除此之外，推薦為使用Lazy Load的圖片元素添加特定的class。這樣你可以輕松的控制插件綁定到哪些圖片。

例如：

然后在腳本中添加：

$(function () {
    $("img.lazy").lazyload();  
});

這將會使所有擁有lazy類名的圖片延遲加載。

注意！你必須通過width和height屬性或者在CSS中為圖片設置尺寸。否則插件不能正常工作。

? 設置閥值

默認情況下，圖片出現在屏幕中時才被加載。如果你想提前加載圖片，可以使用threshold參數。如下面的代碼，將閥值設置為 200 時，圖片會提前200像素被加載。

$("img.lazy").lazyload({
      threshold: 200
});

? 自定義觸發事件

你可以使用jQuery事件，如click或mouseover；也可以使用自定義事件，如sporty或foobar。默認的事件是用戶滾動且圖像出現在視口中。如果想讓用戶點擊時圖片才會顯示，你可以這樣做：

$("img.lazy").lazyload({
      event: "click"
});

提示！你可以使用下面的技巧延遲加載圖像。下面的代碼會在頁面加載完畢后等待五秒加載圖像。See it working at delayed loading demo.

$(function() {
    $("img.lazy").lazyload({
        event : "sporty"
    });
});

$(window).bind("load", function() {
    var timeout = setTimeout(function() {
        $("img.lazy").trigger("sporty")
    }, 5000);
});

? 使用效果

默認地，插件會在圖片完全加載后調用show()方法。當然你也可以用你喜歡的效果。如下面的代碼使用了fadeIn效果。Check how it works at effect demo page.

$("img.lazy").lazyload({
    effect : "fadeIn"
});

? 容器中的圖像

你也可以為滾動容器中的圖像應用此插件，例如帶可滾動的div元素。只需要將該容器元素作為jQuery對象傳遞。這里有一個水平和垂直容器的例子。

#container {
    height: 600px;
    overflow: scroll;
}

$("img.lazy").lazyload({
    container: $("#container")
});

? 當圖片并非順序

頁面滾動后，插件會遍歷未加載的圖片。遍歷會檢查圖片是否變的可見。默認地，循環會在找到第一個視口外的圖像時停止。然而這是基于這樣的假設：頁面上圖像的順序與HTML代碼中順序相同。但是某些頁面的布局不符合該假設。你可以設置failure_limit參數以控制加載行為。

$("img.lazy").lazyload({
    failure_limit : 10
});

將該參數設置為10表示當在視口下方找到10個圖像時才會停止遍歷圖像。如果你的布局更加特別，可以把該參數值調為更高。最差的情況是該值為實際圖片的數量。

? 處理不可見圖片

有時會有這樣的情況出現，圖片在視口中在并不是:visible。為了提高性能，你可以選擇忽略.not(":visible")的圖像。

$("img.lazy").lazyload({
    skip_invisible : true
});

HEADS UP! Webkit browsers will report images with without width and height as not .not(":visible"). This causes images to appear only when you scroll a bit. Either fix your image tags or keep skip_invisible as false. Use this feature only if you know what you are doing.

? 安裝

你可以使用bower或者npm安裝：

$ bower install jquery.lazyload
$ npm install jquery-lazyload

（完）

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/89444.html

帶型帶秀專題之 Lazy Load (三)

摘要：而和則表示該容器中頁面視圖區的大小減去邊框寬度。語法實際上，返回的值是一個雙精度浮點值，指示文檔當前從原點垂直滾動的像素數，其中正值表示向上滾動。除此之外，舊版本不支持這些屬性，必須通過檢查其他非標準屬性來解決。博客地址：https://guitong.github.io/blo... 上一節中，我們分析了 jQuery lazyload 源碼，其中有這么一段： /* 在jQue...

everfight 2019-08-21 17:23 評論0 收藏0
帶型帶秀專題之 Lazy Load (二)

摘要：參考文章使用及源碼分析關于插件的基本介紹和使用請看上一篇文章。顯示方法默認為，也可以設置為，源碼中隱藏了一個配置屬性，用于設置動畫運行的時間。是否忽略隱藏的元素設置為時會忽略處理隱藏的元素。在觸發事件時執行的回調。參考文章：jQuery.lazyload使用及源碼分析關于 jQuery lazyload 插件的基本介紹和使用請看上一篇文章。（水水一章啦-。-） Overview 讓...

tigerZH 2019-08-21 17:23 評論0 收藏0
Spring專題之Bean初始化源碼分析（1）

摘要：初始化我們知道容器初始化后會對容器中非懶加載的，單例的以及非抽象的定義進行的初始化操作，所以我們分析源碼的入口也就是在容器初始化的入口，分析容器初始化后在什么地方開始第一次的初始化。前言 Spring IOC容器在初始化之后會對容器中非懶加載的，單例的以及非抽象的bean定義進行bean的初始化操作，同時會也涉及到Bean的后置處理器以及DI（依賴注入）等行為。對于Bean的初始化，...

harryhappy 2019-08-19 11:06 評論0 收藏0
react-lazy-load粗讀

摘要：粗讀近來沒什么特別要做的事，下班回來的空閑時間也比較多，所以抽空看看懶加載是怎么實現的，特別是看了下的庫的實現。之先別關注，按他給注釋說測試用。之是組件綁定事件時會觸發的函數。 react-lazy-load粗讀近來沒什么特別要做的事，下班回來的空閑時間也比較多，所以抽空看看懶加載是怎么實現的，特別是看了下 react-lazy-load 的庫的實現。懶加載這里懶加載場景不是路由...

dailybird 2019-08-26 12:13 評論0 收藏0
JavaScript專題之惰性函數

摘要：專題系列第十五篇，講解惰性函數需求我們現在需要寫一個函數，這個函數返回首次調用時的對象，注意是首次。解決四惰性函數不錯，惰性函數就是解決每次都要進行判斷的這個問題，解決原理很簡單，重寫函數。 JavaScript 專題系列第十五篇，講解惰性函數需求我們現在需要寫一個 foo 函數，這個函數返回首次調用時的 Date 對象，注意是首次。解決一：普通方法 var t; functio...

Jackwoo 2019-08-20 18:52 評論0 收藏0