關於延遲加載的方法總結

      針對大量圖片的網頁或結構很長很複雜的網頁加載完成每每很慢，致使頁面渲染很慢，用戶等待的時間過長，爲了提升用戶體驗，每每採用優先加載第一屏的內容，後續的採用延遲加載的方式。本人總結了以下方法有：

一、採用lazyload插件

     在頭部引入jq公共庫與<script type="text/javascript" src="jquery.lazyload.js"></script>

      js： 

      $('img').lazyload({

             effect:'fadeIn'
           })  //設置表現形式

更多參考：http://www.rainleaves.com/html/1248.html

 

2.採用圖片代替法。用一張圖片填充等dom加載完後再取得真正的圖片來填充

     <img src="img/11.png" width="190" height="150" reimg="img/1.jpg">
     <img src="img/11.png" width="190" height="150" reimg="img/2.jpg">
     <img src="img/11.png" width="190" height="150" reimg="img/3.jpg">

      js:

window.onload = function() {

          //把真的圖片替換圖片
          $('img').each(function(){
               var reimg = $(this).attr('reimg');
               $(this).attr('src',reimg);
          })
     }

 

3.對於dom結構繁瑣的，採用textarea形式。由於瀏覽器不會渲染textarea裏面的內容，等其餘的dom和其餘圖片等加載完後再把裏面的內容取出來填充

<div id="two"></div>

<textarea id="temp" type="hidden">

     <li><img src="img/7.jpg" width="490" height="250"></li>

     <li><img src="img/8.jpg" width="490" height="250"></li>    

</textarea>

      js:

window.onload = function() {

          var la_html = $('#temp').val();
          $('#two').html(la_html);     

 }

 

注：以上方法僅此是對瀏覽器上使得頁面表現形式上改善，並不能減輕服務器的負荷，若是想減輕服務器的負荷能夠結合java異步加載的方式來實現。