关于延迟加载的方法总结

      针对大量图片的网页或结构很长很复杂的网页加载完成往往很慢，导致页面渲染很慢，用户等待的时间过长，为了提高用户体验，往往采用优先加载第一屏的内容，后续的采用延迟加载的方式。本人总结了如下方法有：

1、采用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异步加载的方式来实现。

转载于:https://www.cnblogs.com/yenn/p/3368802.html