欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JS圖片懶加載技術(shù)實(shí)現(xiàn)過程解析

 更新時(shí)間：2020年07月27日 10:57:31   作者：-零  
這篇文章主要介紹了JS圖片懶加載技術(shù)實(shí)現(xiàn)過程解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

懶加載技術(shù)

懶加載（LazyLoad）是前端優(yōu)化的一種有效方式，極大的提升用戶體驗(yàn)，圖片一直是頁面加載的流浪大戶，現(xiàn)在一張圖片幾兆已經(jīng)是很正常的事，遠(yuǎn)遠(yuǎn)大于代碼的大小。

原理：頁面加載后只讓文檔可視區(qū)內(nèi)的圖片顯示，其它不顯示，隨著用戶對頁面的滾動，判斷其區(qū)域位置，生成img標(biāo)簽，讓到可視區(qū)的圖片加載出來。

所用相關(guān)技術(shù)：給img加屬性 (例如data-src），將圖片的地址賦值給他，這樣就生成img標(biāo)簽后再把data-src的值賦給img的src（通過dataset.src或者getAttribute('src'),再賦值給img.setAttribute('src')）。

jqueryLazyload方式

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
      *{
        margin:0px;
        padding: 0;
      }
      .wrap{
        overflow: hidden;
        width:915px;
        background:#2d2d2d;
        margin:50px auto;
        border-radius:10px;
        /*font-size:0px;*/
      }
      .wrap img{
        float:left;  
        display: block;
        width:280px;
        height:180px;
        margin:10px 10px;
        border:2px solid #7c7c7c;
        border-radius:10px;
      }
    </style> 
  </head>
  <body>
    
    <div class="wrap"> 
      <img src="js/images2/1.jpg" />
      <img src="js/images2/2.jpg" />
      <img src="js/images2/3.jpg" />
      <img src="js/images2/4.jpg" />
      <img src="js/images2/5.jpg" />
      <img src="js/images2/6.jpg" />
      <img src="js/images2/7.jpg" />
      <img src="js/images2/1.jpg" />
      <img src="js/images2/2.jpg" />
      <img src="js/images2/3.jpg" />
      <img src="js/images2/4.jpg" />
      <img src="js/images2/5.jpg" />
      <img src="js/images2/6.jpg" />
      <img src="js/images2/7.jpg" />
      <img src="js/images2/1.jpg" />
      <img src="js/images2/2.jpg" />
      <img src="js/images2/3.jpg" />
      <img src="js/images2/4.jpg" />
      <img src="js/images2/5.jpg" />
      <img src="js/images2/6.jpg" />
      <img src="js/images2/7.jpg" />
      <img src="js/images2/1.jpg" />
      <img src="js/images2/2.jpg" />
      <img src="js/images2/3.jpg" />
      <img src="js/images2/4.jpg" />
      <img src="js/images2/5.jpg" />
      <img src="js/images2/6.jpg" />
      <img src="js/images2/7.jpg" />
      <img src="js/images2/1.jpg" />
      <img src="js/images2/2.jpg" />
      <script src="js/jquery-1.11.1.min.js"></script>
      <script src="js/lazyload.js"></script>
      <script>
       $("img").lazyload({
        placeholder :"images2/loading.gif", //用圖片提前占位
        // placeholder,值為某一圖片路徑.此圖片用來占據(jù)將要加載的圖片的位置,待圖片加載時(shí),占位圖則會隱藏
       effect: "fadeIn", // 載入使用何種效果
        // effect(特效),值有show(直接顯示),fadeIn(淡入),slideDown(下拉)等,常用fadeIn
       threshold: 200, // 提前開始加載
        // threshold,值為數(shù)字,代表頁面高度.如設(shè)置為200,表示滾動條在離目標(biāo)位置還有200的高度時(shí)就開始加載圖片,可以做到不讓用戶察覺
       // event: 'click', // 事件觸發(fā)時(shí)才加載
        // event,值有click(點(diǎn)擊),mouseover(鼠標(biāo)劃過),sporty(運(yùn)動的),foobar(…).可以實(shí)現(xiàn)鼠標(biāo)莫過或點(diǎn)擊圖片才開始加載,后兩個(gè)值未測試…
       //container: $("#container"), // 對某容器中的圖片實(shí)現(xiàn)效果
        // container,值為某容器.lazyload默認(rèn)在拉動瀏覽器滾動條時(shí)生效,這個(gè)參數(shù)可以讓你在拉動某DIV的滾動條時(shí)依次加載其中的圖片
       //failurelimit : 10 // 圖片排序混亂時(shí)
         // failurelimit,值為數(shù)字.lazyload默認(rèn)在找到第一張不在可見區(qū)域里的圖片時(shí)則不再繼續(xù)加載,但當(dāng)HTML容器混亂的時(shí)候可能出現(xiàn)可見區(qū)域內(nèi)圖片并沒加載出來的情況,failurelimit意在加載N張可見區(qū)域外的圖片,以避免出現(xiàn)這個(gè)問題.
       });
      </script>
    </div>
  </body>
</html>

echo.js方式

echo.js是一款非常簡單實(shí)用輕量級的圖片延時(shí)加載插件，如果你的項(xiàng)目中沒有依賴jquery，那么這將是個(gè)不錯(cuò)的選擇，50行代碼，壓縮后才1k。當(dāng)然你完全可以集成到自己項(xiàng)目中去。

下載地址：https://github.com/helijun/helijun/tree/master/plugin/echo

<style>
　　.demo img { 
　　　　width: 736px; 
　　　　height: 490px; 
　　　　background: url(images/loading.gif) 50% no-repeat;}
</style>

<div class="demo">
  <img class="lazy" src="images/blank.gif" data-echo="images/big-1.jpg">
</div>
<script src="js/echo.min.js"></script>
<script>
Echo.init({
  offset: 0,//離可視區(qū)域多少像素的圖片可以被加載
　　 throttle: 0 //圖片延時(shí)多少毫秒加載
}); 
</script>

說明：blank.gif是一張背景圖片，包含在插件里了。圖片的寬高必須設(shè)定，當(dāng)然，可以使用外部樣式對多張圖片統(tǒng)一控制大小。data-echo指向的是真正的圖片地址。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論