网站优化之如何用原生javascript去完成懒加载技术--lazyload

最新推荐文章于 2021-09-05 22:52:05 发布

baibaibeaytiful

最新推荐文章于 2021-09-05 22:52:05 发布

阅读量1.1k

点赞数 1

分类专栏： web前端 javascript 文章标签： javascript 用户体验图片优化

本文链接：https://blog.csdn.net/wzdlovewen/article/details/52004715

版权

web前端 javascript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

前几天，技术总监说，我们现在的很多站点加载出来需要很长的时间。你去想办法去优化一下，看能不能提高加载速度，增加用户体验。然后我就去访问了下站点，发现所有的站点都有同一个问题。就是加载图片耗费了大量的时间。

既然是图片的问题，那就压缩图片吧。压完更新后，发现有效果，但是治标不治本。于是就找了几种解决方法：

1.lazyload

2.延迟加载（用setTimeout去做，有点不着调啊）

3预加载（此方法适用于增加用户体验，但是更加对服务器有压力了）

4.增加带宽，换好的服务器（你懂的，一般老板不到最后时刻都不会这样的）

那就只有lazyload的，当然，这只是现在能想到的几种方法。趋势上网搜了下，有jq的插件。

<img class="lazy" data-original="img/bmw_m1_hood.jpg">
<img class="lazy" data-original="img/bmw_m1_side.jpg">
<img class="lazy" data-original="img/viper1.jpg">
<img class="lazy" data-original="img/viper_corner.jpg">
<img class="lazy" data-original="img/bmw_m3_gt.jpg">
<img class="lazy" data-original="img/corvette_pitstop.jpg">

 相信看过lazyload说明的都知道，他的图片路径要写在data-original里面。那一般就把代码里面有关img标签里面的img的路径改了，然后就是引入那个jq 和lazyload的两个js文件，最后就是

<pre name="code" class="html"><script type="text/javascript" charset="utf-8">
  $(function() {
      $("img.lazy").lazyload({effect: "fadeIn"});
  });
</script>

以为这样就行了，但是！关键是但是！我所在的公司是做智能建站系统的，那么基本不可能去修改里面img标签的，因为那是自动生成的。后台添加的，我们只能在公共区域引入js，所以只能获取到img标签的元素。然后就有了接下来的故事。

本着既然这是人写出来的，那么他行我也行（虽然我也是只菜鸟，但是是一个执着的菜鸟。哈哈）

我们先整理下思路：

lazyload的本质是在图片快要进入屏幕可视区域的时候加载，

第一步：dom树加载完毕图片加载之前，让所有图片都不能加载（img的src=“”）；

第二步：dom树加载完成之后加载可视区域和接近可是区域的图片；

第三部：当滚动时触发快要进入屏幕可视区域的时候加载图片（onscroll事件）；

准备工作：

这是获取滚动距离的js代码，已经考虑的兼容性；

2.function caltop(vrobj){
   var vtop=vrobj.offsetHeight;
   while(vrobj.offsetParent){
   vtop+= vrobj.offsetTop;
   vrobj = vrobj.offsetParent;
}
return vtop;
}

获取元素的相对于浏览器的高度；

$(function(){
var hh=getPageScroll(); //hh保存了一个关于scrolltop的对象
var tupian=document.getElementsByTagName('img');//获取所有的图片元素

var a =[];
var b=[];

    $('img ').each(function(){
   var wzd=this.getAttribute('wzd');
       a.push(wzd);
   })

   $(tupian).attr('src','');
   $(tupian).animate({
        opacity: 0,
    }, 10);
   $(tupian).each(function(){
   b.push(this);

   });
   $(b).each(function(){
       if(($(this).position().top-hh.yy-$(window).height())<100){

       this.src=a[0];
       this.οnlοad=function(){
           $(this).animate({
           opacity: 1,
           }, 1000);
       }
       b.shift();
       a.shift();
       console.log('2');
       }
   });

document.οnscrοll=function(){
       hh=getPageScroll();
       $(b).each(
           function(){
               if((caltop(this)-hh.yy-$(window).height())<100){
               this.src=a[0];
               this.οnlοad=function(){
               $(this).animate({
               opacity: 1,
               }, 1000);
       }
               b.shift();
               a.shift();

               console.log('1');
               }

           }
       )
   }

});