成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

wangzy2019 / 3311人閱讀

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

今天開(kāi)始帶型帶秀專題 -- Lazy Load。先從使用比較廣泛的 jQuery Lazy Load 插件開(kāi)始，逐步深入。該插件已經(jīng)開(kāi)發(fā)到了第二版，有興趣的同學(xué)可以去看一看。專題第二節(jié)會(huì)深入到源碼。

Lazy Load Plugin for jQuery 
Github 地址

Lazy Load用于延遲加載圖片。它會(huì)延遲加載視口外的圖片，直到用戶滾動(dòng)頁(yè)面使其出現(xiàn)。與圖片預(yù)加載正好相反。

在包含許多大圖片的長(zhǎng)頁(yè)面上使用Lazy Load可使頁(yè)面加載速度更快。在可視圖片加載后，瀏覽器將處于就緒狀態(tài)。某些情況下也可幫助服務(wù)器減少負(fù)載。

Lazy Load啟發(fā)于 Matt Mlinac 的 YUI ImageLoader。

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

注意！查看新的demo時(shí)清除緩存。你可以使用開(kāi)發(fā)者工具（Chrome，Safari IE）或Firebug（Firefox）查看頁(yè)面實(shí)際加載的內(nèi)容。
? 用法


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

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

例如：

然后在腳本中添加：

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

這將會(huì)使所有擁有l(wèi)azy類名的圖片延遲加載。

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

默認(rèn)情況下，圖片出現(xiàn)在屏幕中時(shí)才被加載。如果你想提前加載圖片，可以使用threshold參數(shù)。如下面的代碼，將閥值設(shè)置為 200 時(shí)，圖片會(huì)提前200像素被加載。

$("img.lazy").lazyload({
      threshold: 200
});
? 自定義觸發(fā)事件

你可以使用jQuery事件，如click或mouseover；也可以使用自定義事件，如sporty或foobar。默認(rèn)的事件是用戶滾動(dòng)且圖像出現(xiàn)在視口中。如果想讓用戶點(diǎn)擊時(shí)圖片才會(huì)顯示，你可以這樣做：

$("img.lazy").lazyload({
      event: "click"
});
提示！ 你可以使用下面的技巧延遲加載圖像。下面的代碼會(huì)在頁(yè)面加載完畢后等待五秒加載圖像。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);
});
? 使用效果

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

$("img.lazy").lazyload({
    effect : "fadeIn"
});
? 容器中的圖像

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

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

$("img.lazy").lazyload({
    container: $("#container")
});
? 當(dāng)圖片并非順序

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

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

將該參數(shù)設(shè)置為10表示當(dāng)在視口下方找到10個(gè)圖像時(shí)才會(huì)停止遍歷圖像。如果你的布局更加特別，可以把該參數(shù)值調(diào)為更高。最差的情況是該值為實(shí)際圖片的數(shù)量。

? 處理不可見(jiàn)圖片

有時(shí)會(huì)有這樣的情況出現(xiàn)，圖片在視口中在并不是: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

（完）

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/89444.html

相關(guān)文章

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

    摘要：而和則表示該容器中頁(yè)面視圖區(qū)的大小減去邊框?qū)挾?。語(yǔ)法實(shí)際上，返回的值是一個(gè)雙精度浮點(diǎn)值，指示文檔當(dāng)前從原點(diǎn)垂直滾動(dòng)的像素?cái)?shù)，其中正值表示向上滾動(dòng)。除此之外，舊版本不支持這些屬性，必須通過(guò)檢查其他非標(biāo)準(zhǔn)屬性來(lái)解決。 博客地址：https://guitong.github.io/blo... 上一節(jié)中，我們分析了 jQuery lazyload 源碼，其中有這么一段： /* 在jQue...

    everfight 評(píng)論0 收藏0

  • 帶型帶秀專題之 Lazy Load (二)

    摘要：參考文章使用及源碼分析關(guān)于插件的基本介紹和使用請(qǐng)看上一篇文章。顯示方法默認(rèn)為，也可以設(shè)置為，源碼中隱藏了一個(gè)配置屬性，用于設(shè)置動(dòng)畫(huà)運(yùn)行的時(shí)間。是否忽略隱藏的元素設(shè)置為時(shí)會(huì)忽略處理隱藏的元素。在觸發(fā)事件時(shí)執(zhí)行的回調(diào)。 參考文章：jQuery.lazyload使用及源碼分析 關(guān)于 jQuery lazyload 插件的基本介紹和使用請(qǐng)看上一篇文章。（水水一章啦-。-） Overview 讓...

    tigerZH 評(píng)論0 收藏0

  • Spring專題之Bean初始化源碼分析（1）

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

    harryhappy 評(píng)論0 收藏0

  • react-lazy-load粗讀

    摘要：粗讀近來(lái)沒(méi)什么特別要做的事，下班回來(lái)的空閑時(shí)間也比較多，所以抽空看看懶加載是怎么實(shí)現(xiàn)的，特別是看了下的庫(kù)的實(shí)現(xiàn)。之先別關(guān)注，按他給注釋說(shuō)測(cè)試用。之是組件綁定事件時(shí)會(huì)觸發(fā)的函數(shù)。 react-lazy-load粗讀 近來(lái)沒(méi)什么特別要做的事，下班回來(lái)的空閑時(shí)間也比較多，所以抽空看看懶加載是怎么實(shí)現(xiàn)的，特別是看了下 react-lazy-load 的庫(kù)的實(shí)現(xiàn)。 懶加載 這里懶加載場(chǎng)景不是路由...

    dailybird 評(píng)論0 收藏0

  • JavaScript專題之惰性函數(shù)

    摘要：專題系列第十五篇，講解惰性函數(shù)需求我們現(xiàn)在需要寫(xiě)一個(gè)函數(shù)，這個(gè)函數(shù)返回首次調(diào)用時(shí)的對(duì)象，注意是首次。解決四惰性函數(shù)不錯(cuò)，惰性函數(shù)就是解決每次都要進(jìn)行判斷的這個(gè)問(wèn)題，解決原理很簡(jiǎn)單，重寫(xiě)函數(shù)。 JavaScript 專題系列第十五篇，講解惰性函數(shù) 需求 我們現(xiàn)在需要寫(xiě)一個(gè) foo 函數(shù)，這個(gè)函數(shù)返回首次調(diào)用時(shí)的 Date 對(duì)象，注意是首次。 解決一：普通方法 var t; functio...

    Jackwoo 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<