国产一级a片免费看高清,亚洲熟女中文字幕在线视频,黄三级高清在线播放,免费黄色视频在线看

打開APP
userphoto
未登錄

開通VIP，暢享免費(fèi)電子書等14項超值服

開通VIP

首頁

好書

留言交流

下載APP

聯(lián)系客服
按需加載圖片（圖片懶加載）

 前言

按需要加載圖片，這是一個非常實用的功能，不僅可以提高網(wǎng)站的性能，還可以為你節(jié)省流量。對于用虛擬主機(jī)的朋友來說，如果你的網(wǎng)站是一個圖片網(wǎng)站或者圖片比較多的網(wǎng)站，那么圖片懶加載功能真不能少。

原理

實現(xiàn)圖片懶加載的原理也非常地簡單，默認(rèn)情況下不給圖片 scr 屬性賦值。當(dāng)滿足一定的條件時才把圖片地址取出來賦值給 src 屬性。一般地，這上為了讓網(wǎng)站頁面有更好的用戶體驗，我們都會預(yù)先給所有的圖片都設(shè)置一張默認(rèn)的圖片，比如一個像素的圖片或者其它任意一張圖片（只要你喜歡）。

實踐代碼

我們還是先來看看這個 Demo：http://yunkus.com/demo/load-images-on-demand/

例子中用了一個談入的效果（CSS 3），如果你想用更多的效果，你可以下載一下 animate.css 庫，嘗試不同效果展示。在這里就不作過多的講解，至于 animate.css 庫的用法你可以參考這里：

Animate.css 使用教程（一個強(qiáng)大的 CSS3 動畫庫）。

CSS 樣式

  1.  .lazy-img-box {
  2.      margin: 0 auto;
  3.      width: 430px;
  4.      overflow: hidden
  5.  }
  7.  .lazy-img-box li {
  8.      list-style: none;
  9.      float: left;
  10.      width: 400px;
  11.      height: 200px;
  12.      margin-right: 12px;
  13.      margin-bottom: 12px;
  14.  }
  16.  .lazy-img-box li img {
  17.      width: 400px;
  18.      height: 200px;
  19.      display: block;
  20.  }
  22.  .animated {
  23.      -webkit-animation-duration: 1s;
  24.      animation-duration: 1s;
  25.      -webkit-animation-fill-mode: both;
  26.      animation-fill-mode: both;
  27.  }
  29.  @-webkit-keyframes fadeIn {
  30.      from {
  31.          opacity: 0;
  32.      }
  33.      to {
  34.          opacity: 1;
  35.      }
  36.  }
  38.  @keyframes fadeIn {
  39.      from {
  40.          opacity: 0;
  41.      }
  42.      to {
  43.          opacity: 1;
  44.      }
  45.  }
  47.  .fadeIn {
  48.      -webkit-animation-name: fadeIn;
  49.      animation-name: fadeIn;
  50.  }

 HTML 代碼

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>按需加載圖片（圖片懶加載）-云庫網(wǎng)</title>
  6.     <meta name="description" content="按需加載圖片不僅提高網(wǎng)站性能，還可以為你省了不少流量！" />
  7.     <meta name="keywords" content="JavaScript教程,按需加載圖片,圖片懶加載" />
  8.     <link rel="stylesheet" href="./index.css">
  9. </head>
  10. <body>
  11.     <ul class="lazy-img-box">
  12.         <li><img _src="http://yunkus.com/demo/lib/images/demo-1.jpg" src="./images/loading.gif" alt=""></li>
  13.         <li><img _src="http://yunkus.com/demo/lib/images/demo-2.jpg" src="./images/loading.gif" alt=""></li>
  14.         <li><img _src="http://yunkus.com/demo/lib/images/demo-3.jpg" src="./images/loading.gif" alt=""></li>
  15.         <li><img _src="http://yunkus.com/demo/lib/images/demo-4.jpg" src="./images/loading.gif" alt=""></li>
  16.         <li><img _src="http://yunkus.com/demo/lib/images/demo-5.jpg" src="./images/loading.gif" alt=""></li>
  17.         <li><img _src="http://yunkus.com/demo/lib/images/demo-6.jpg" src="./images/loading.gif" alt=""></li>
  18.         <li><img _src="http://yunkus.com/demo/lib/images/demo-7.jpg" src="./images/loading.gif" alt=""></li>
  19.         <li><img _src="http://yunkus.com/demo/lib/images/demo-8.jpg" src="./images/loading.gif" alt=""></li>
  20.         <li><img _src="http://yunkus.com/demo/lib/images/demo-9.jpg" src="./images/loading.gif" alt=""></li>
  21.         <li><img _src="http://yunkus.com/demo/lib/images/demo-1.jpg" src="./images/loading.gif" alt=""></li>
  22.         <li><img _src="http://yunkus.com/demo/lib/images/demo-2.jpg" src="./images/loading.gif" alt=""></li>
  23.         <li><img _src="http://yunkus.com/demo/lib/images/demo-3.jpg" src="./images/loading.gif" alt=""></li>
  24.         <li><img _src="http://yunkus.com/demo/lib/images/demo-4.jpg" src="./images/loading.gif" alt=""></li>
  25.         <li><img _src="http://yunkus.com/demo/lib/images/demo-5.jpg" src="./images/loading.gif" alt=""></li>
  26.         <li><img _src="http://yunkus.com/demo/lib/images/demo-6.jpg" src="./images/loading.gif" alt=""></li>
  27.         <li><img _src="http://yunkus.com/demo/lib/images/demo-7.jpg" src="./images/loading.gif" alt=""></li>
  28.         <li><img _src="http://yunkus.com/demo/lib/images/demo-8.jpg" src="./images/loading.gif" alt=""></li>
  29.         <li><img _src="http://yunkus.com/demo/lib/images/demo-9.jpg" src="./images/loading.gif" alt=""></li>
  30.     </ul>
  31.     <script src="./index.js"></script>
  32. </body>
  33. </html>

JavaScript 代碼

  1. window.onload = function () {
  2.     var lazyImg = document.getElementsByTagName("img");
  3.     var lazyImgLen = lazyImg.length;
  4.     var lazyImgArray = [];
  5.     var winowBroswerHeight = document.documentElement.clientHeight;
  7.     // 初始第一屏圖片
  8.     loadImg();
  10.     // 滾動時執(zhí)行加載圖片的方法
  11.     window.onscroll = loadImg;
  13.     // 按需加載圖片
  14.     function loadImg() {
  15.         for (var i = 0; i < lazyImgLen; i++) {
  16.             var getTD = getTopDistance(lazyImg[i]);
  17.             var getST = getScrollTop();
  18.             if (!lazyImg[i].loaded && getST < getTD && getTD < (getST + winowBroswerHeight)) {
  19.                 lazyImg[i].src = lazyImg[i].getAttribute("_src");
  20.                 lazyImg[i].classList.add("animated", "fadeIn");
  21.                 lazyImg[i].loaded = true; // 標(biāo)記為已加載
  22.             }
  23.         }
  24.     }
  25.     // 獲取目錄對象離 document 文檔頂部的距離
  26.     function getTopDistance(obj) {
  27.         var TopDistance = 0;
  28.         while (obj) {
  29.             TopDistance += obj.offsetTop;
  30.             obj = obj.offsetParent;
  31.         }
  32.         return TopDistance;
  33.     }
  34.     // 獲取滾動條的滾動距離  
  35.     function getScrollTop() {
  36.         return document.documentElement.scrollTop || document.body.scrollTop;
  37.     }
  38. }

不管滾動條處于什么位置，只要你一刷新，就只會加載處于屏幕里的圖片。除此之處不管是屏幕上方的圖片，還是屏幕下方的圖片只要還沒進(jìn)入屏幕區(qū)的都不會被加載。這樣的處理方式理論上是比較優(yōu)的，但是在實踐的應(yīng)用中，卻不一定能發(fā)展出原有的作用。試想一下，不管你是通過地址直接訪問，還是通過搜索引擎進(jìn)入一個頁面，一般情況下都會從頁面的頂部內(nèi)容開始顯示，如果你有潔癖想讓代碼更簡單，那么 loadImg() 方法就可以更改成如下代碼：

  1. function loadImg() {
  2.     for (var i = 0; i < lazyImgLen; i++) {
  3.         var getTD = getTopDistance(lazyImg[i]);
  4.         var getST = getScrollTop();
  5.         if (!lazyImg[i].loaded && getTD < (getST + winowBroswerHeight)) {
  6.             lazyImg[i].src = lazyImg[i].getAttribute("_src");
  7.             lazyImg[i].classList.add("animated", "fadeIn");
  8.             lazyImg[i].loaded = true; // 標(biāo)記為已加載
  9.         }
  10.     }
  11. }

其實也沒什么變的，只是 if 判斷條件少了一個：

  1. getST < getTD

不過也有例外，比如：從列表頁中點了評論時，極有可能是跳到詳情頁后直接跳到評論區(qū)，這種情況也很常見，此時就不需要更改代碼以達(dá)到最優(yōu)。

這里還有個小問題，關(guān)于滾動監(jiān)聽事件的，像上面那樣寫 window.onscroll = function(){} 一個頁面只能用一個，如果有其它地主也用到這個滾動監(jiān)聽事件的話，那么就會只有一個起作用。在這里可以用事件綁定來解決，具體的方法可以查閱這里：常用的 JavaScript 函數(shù)封裝。


轉(zhuǎn)自：http://yunkus.com/load-images-on-demand/


本站僅提供存儲服務(wù)，所有內(nèi)容均由用戶發(fā)布，如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請點擊舉報。
打開APP，閱讀全文并永久保存 查看更多類似文章
猜你喜歡
類似文章
阿里頁面常見問題及解決方案
Bootstrap簡介
圖片延遲加載(jQuery Lazy Load)中文手冊 | 諸葛小覺的博客
使用marquee能夠控制圖片連續(xù),無空隙滾動
flex space-between最后一行對齊問題的解決方案
文字前面加序列圓點的代碼+圓點素材
更多類似文章 >>
生活服務(wù)
分享 收藏 導(dǎo)長圖 關(guān)注 下載文章
綁定賬號成功
后續(xù)可登錄賬號暢享VIP特權(quán)！
如果VIP功能使用有故障，
可點擊這里聯(lián)系客服！

聯(lián)系客服