lazyload 加載

時間  2019-11-10
標籤 lazyload 加載 简体版
原文   原文鏈接

jQuery Lazy Load是一個基於jQuery的圖片延遲加載插件，在用戶滾動頁面到圖片以後才進行加載，其對於有較多圖片的頁面當中，使用圖片延遲加載，可以有效的提升頁面的加載速度。javascript

這裏給出Lazyload相關的demo頁面（插件做者製做）：html

基本功能、漸變元素、沒有script的返回、水平滾動的頁面、容器內的水平滾動
容器內的縱向滾動、定義延遲時間事後再加載、經過AJAX加載java

注意：在切換每一個demo頁面的時候請記得清除瀏覽器緩存。jquery

接下來咱們說下使用jQuery Lazy Load的三要素：git

一、由於該插件創建在jQuery的存在上，因此請在</body>前加入jQuery和該插件的調用，示例代碼以下：github

  1. <script src="jquery.js" type="text/javascript"></script>
  2. <script src="jquery.lazyload.js" type="text/javascript"></script>
複製代碼

二、必須在image上添加data-original屬性並放入原圖片連接，而且在src中放入執行Lazyload未執行前所顯示的圖片連接，示例代碼以下：windows

  1. <img data-original="images/cover.jpg" width="640" height="480">
複製代碼

注意，若是你想更精確的對指定執行Lazyload的圖片進行定位的話，還能夠在image中添加Id或者class，示例代碼以下：瀏覽器

  1. <img class="top" data-original="images/cover.jpg" width="640" height="480">
複製代碼

三、jQuery Lazy Load的配置函數：緩存

  1. $(function() {
  2. $("img").lazyload();//對全部帶有data-original的圖片進行加載
  3. $("img.top").lazyload();//對全部帶有data-original且屬於top類的圖片進行加載
  4. });
複製代碼

再下面，談下配置jQuery Lazy Load的一些值：app

閾值：百度上的解釋是促發某種行爲或者反應產生所須要的最低值，這裏是設置當前顯示部分底部或者最右邊距離圖片一段距離的時候開始加載開始出現的圖片，這一段距離就是該值所設立的。示例代碼以下：

  1. $("img").lazyload({
  2. threshold : 200
  3. });
複製代碼

注意，默認值是當圖片開始出如今當前顯示部分的時候纔開始加載。

觸發方式：好比經過點擊或者鼠標移動到圖片上才觸發Lazyload，默認是經過鼠標滾動頁面到圖片出現就開始加載。示例代碼以下：

  1. $(function() {
  2. $("img.lazy").lazyload({
  3. event : "sporty"
  4. });
  5. });
複製代碼

下面說下本文一開始給出的demo一一作個介紹：

實現定義延遲時間事後再加載的demo，示例代碼以下：

  1. $(function() {
  2. $("img").lazyload({
  3. event : "sporty"
  4. });
  5. });
  6. $(window).bind("load", function() {
  7. var timeout = setTimeout(function() {
  8. $("img").trigger("sporty")
  9. }, 5000);
  10. });
複製代碼

因爲Lazyload默認是在一張圖片徹底加載了以後才顯現，那麼如今給它加一個漸變的特效，示例代碼以下：

  1. $("img").lazyload({
  2. effect : "fadeIn"
  3. });
複製代碼

沒有script的返回demo，示例代碼以下：

  1. <img class="lazy" src="img/grey.gif" data-original="img/example.jpg" width="765" height="574">
  2. <noscript><img src="img/example.jpg" width="765" height="574"></noscript>
  3. //經過noscript標籤讓不支持JavaScript的瀏覽器直接顯示圖片
  4. <style>.lazy {display: none;}</style>
  5. //經過樣式隱藏lazy類的圖片
  6. <script>$("img.lazy").show().lazyload();</script>
  7. //經過JavaScript顯示lazy類圖片，一樣放置在該插件代碼下便可，一樣支持添加特效等參數
複製代碼

在容器內使用Lazyload：

  1. #container {
  2. height: 600px;
  3. overflow: scroll;
  4. }
  5. $("img.lazy").lazyload({
  6. container: $("#container")//僅須要定義一個容器屬性便可
  7. });
複製代碼

說到這裏，切入一個話題——當圖片並不是有序呈如今瀏覽器窗口的時候應該怎麼辦呢？

Lazyload有一個循環查找img的機制，根據html文檔的佈局從上往下查找，當第一個被找到的img沒有顯示或者加載的時候，它就會中止往下查找，相對來講是對$("img.lazy")這個對象(組)進行順序查找。

可是假如在頁面上有用到float和position等樣式來定位圖片的時候，瀏覽器所呈現的佈局跟html中的DOM(圖片)順序就相駁了，從而致使某種狀況下img出如今當前可顯示頁面上卻沒法顯示或者加載的問題。還有就是由於其循環查找img的機制，在Lazyload找到第一個未顯示的img時，其查找就被停止，從而沒法往下遍歷。

接着這兒給出的方案就是failure_limit屬性，請看如下示例代碼：

  1. $("img").lazyload({
  2. failure_limit : 10
  3. });
複製代碼

其中它的做用是讓Lazyload查找到第10個未顯示的img處，這傢伙主要是用在圖片多且佈局複雜的頁面，若是你的頁面真的太過於「變態」的話請努力上調該值。

說到這裏（真的詞窮了），咱們再說說一個問題——若是遇到不可見的圖片的時候應該怎麼辦？

小覺這兒所說的不可見的圖片所表明的是那些出如今當前顯示屏幕卻沒有 :visible 屬性的圖片，對此Lazyload的默認作法是忽視掉這些沒有 :visible 屬性的圖片。因此對此能夠對函數配置skip_invisible爲false來從新讓Lazyload遍歷到這些不可見的圖片，可參考如下示例代碼：

  1. $("img").lazyload({
  2. skip_invisible : false
  3. });
複製代碼

注意：Webkit內核瀏覽器在img上沒有定義圖片寬和高的狀況下會報告這類不可見圖片，這將致使只有在你滾動鼠標的一會纔可以顯示圖片，固然這也得基於你已經對其將skip_invisible設置爲false。

說到這裏（實在是不知道怎麼銜接了），咱們再說說又一個問題，Lazyload能否應用到背景圖片中呢？

答案是能夠的，默認待其因頁面滾動而顯現的時候就會加載，這和Lazyload基本特性相同，並且這裏有兩種方法使用：

其一是用在沒有圖片的元素上，且其會自動改變background-image樣式爲data-original上的連接，實例代碼以下：

  1. <div class="lazy" data-original="img/bmw_m1_hood.jpg" style="background-image: url('img/grey.gif'); width: 765px; height: 574px;"></div>
  2. $("div.lazy").lazyload({});
複製代碼

其二是用在img佔位符上，且在該佔位符上將失去一個http請求，示例代碼以下：

  1. <img class="lazy" data-original="img/example.jpg" width="765" height="574">
  2. $("img.lazy").lazyload();
複製代碼

注意：如今只有Lazyload 1.9.0及其以上版本支持在背景圖片上使用延遲加載。

說到這裏（……），再說下Lazyload的兩個事件，即appear和load，同時這兩個時間又含有兩個參數，即elements_left和settings，下面一一說明一下：

  1. appear：當圖片出如今當前視區，但尚未進行加載以前會被執行。
  2. load：當圖片已經被加載時。
  3. elements_left：指的是圖片由左邊開始進行加載。
  4. settings：將所設置的內容傳向Lazyload。
複製代碼

可能上述文字有點難以明白，如下爲一示例代碼：

  1. $("img.lazy").lazyload({
  2.     appear : function(elements_left, settings) {
  3.         console.log(this, elements_left, settings);
  4.     },
  5.     load : function(elements_left, settings) {
  6.         console.log(this, elements_left, settings);
  7.     }
  8. });
複製代碼

上述代碼所執行的是讓lazy類的圖片在出現的時候由左向右加載，而後在加載全部圖片時也是由左向右加載，啊！！我也不懂，但願懂的朋友可以糾正下，度娘和谷歌都沒法給出準確的迴應。

說到這裏（= =），讓咱們再說說一個參數atta_attribute，它的做用是能夠自定義original 圖片屬性，下面給出示例代碼的話你們應該懂了：

  1. <script>
  2. $("img.lazy").lazyload({
  3.     data_attribute  : "kitten"
  4. });
  5. </script>
  6. <img src="/img/placeholder.gif" data-kitten="/img/real-image.png" />
複製代碼

最後小覺也本身寫了一串代碼來增強Lazyload，固然小覺的水平不可能讓其支持其全部功能，這裏小覺所要達到的目的是自動將原img中的src真實地址放置於data-original中，而後src中定義未加載真實圖片前的圖片地址。示例代碼以下：

  1. $("img").each(function () {
  2.     var that = $(this);
  3.     var re=/(.+?.(jpg|bmp|png|jepg|gif))/i;
  4.     href = that.attr("src");
  5.     if (re.test(href)) {
  6.         that.attr("data-original",href);//轉移原圖片中的真連接到data-original
  7.         href =href.replace(re, "123.jpg");//定義未加載前的圖片
  8.         that.attr("src",href);
  9.     }
  10. });//配合jQuery Lazy Load修改指定圖片連接函數，放置於Lazyload配置函數以前
  11. $(function() {
  12.     $("img").lazyload();
  13. });//jQuery Lazy Load配置函數
複製代碼

關於Lazyload的下載（可直接調用連接，最新版本都出如今該連接）：

最新的Lazyload原始版本：https://raw.github.com/tuupola/j ... /jquery.lazyload.js

最新的Lazyload壓縮版本：https://raw.github.com/tuupola/j ... ery.lazyload.min.js

已經在Safari 5.1, Safari 6, Chrome 20, Firefox 12 on OSX and Chrome 20, IE 8 and IE 9 on windows and Safari 5.1 on iOS 5 both iphone and ipad等地進行測試完善。
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程