前端项目分析：我是如何做图片优化的（预加载和懒加载）

也是预加载的经典了，最下面那三行意思是：大概比及笔墨加载完再加载图片。
我一口老血喷出来，假如如许我要你干嘛？？？

ajax方式实现预加载（网上看的，不太发起使用这种方式）：

    $(function(){
        $.get('图片的路径');
    })
    /*
    固然我们也可以写成一个函数，这里我就不演示了
    */

试验了许多场景，发现正如我上面所说，预加载着实更得当如hover变动后的图片加载（管理闪屏题目），在网页刚打开的谁人图片情况要求下着实作用真不如懒加载。以是，我们可以将其放在须要相应鼠标变乱（说白了，就是刚上去时不须要瞥见）的地方。

但是我的紧张要求是首屏加载图片优化，进步用户体验，怎么办呢？
预加载似乎帮不了我，，，
思量再三，我决定 “投靠” 懒加载 雄师！

作甚 “懒加载”？
在图片由于某些缘故起因没有表现出来时，用一个占位符去表现，这是进步用户体验的不错方式，现在，京东等商城网站上就用了此技能。
懒加载的英华：不要将真正图片放在src中引入，src中放“占位图”！

为什么使用懒加载：
在一个页面中，假设有20张图片，每张为100kb，用户在不点滚动条的时间看到的只有4张，假如这20张图片都设置了真正的src，那么当页面初次加载的时间欣赏器会立刻哀求这20张图片资源，须要2000kb的流量；
但是我们做懒加载只哀求用户看到的4张图片的话，欣赏器只哀求这4张图片资源，须要的流量只有400kb。这种本事可以大大镌汰首屏时间。

代码展示：

index.html

    
        
    
    
        
        
        
        
        
        
    
       /*用http方式引入jQuery文件（min指压缩过的）*/
    

如上，在几张图片中，我们将 真正的图片 放在picAddress中，在src中放 占位图
在js中，页面加载完成后，根据scrollTop判定图片是否在用户的视野内，假如在，则将picAddress属性中的值取出存放到src属性中 （在滚动变乱中重复判定图片是否进入视野，假如进入，则将picAddress属性中的值取出存放到src属性中）。
lazyLoadImg.js

/* 
* @example
* 
* @param src内里写的是占位图大概说兜底图所在（一张默认添补图）
* @param class="lazyLoadImg" 是必须的标识
* @param picAddress内里写的是真正须要懒加载的图片所在
*/
const lazyLoadImg = {
  initConfig() {
    const self = this;
    self.imgObject.srcFlag = 'picAddress'; // 图片所在
    self.imgObject.class = 'lazyLoadImg'; // 惰性加载的图片须要添加的class
    self.imgObject.sensitivity = 40; // 鼠标滚动敏感度，该值越小，惰性越强（加载越少）
    self.imgObject.init();
  },
  imgObject: {
    trigger() {
      const self = this;
      const eventType = (self.isPhone && 'touchend') || 'scroll';
      self.imgListData = $('img.' + self.class + '');
      $(window).trigger(eventType);
    },
    init() {
      var self = this;
      $(window).on('scroll', function() {
        self.isLoadImg();
      });
      self.trigger();
    },
    isLoadImg() {
      const self = this;
      function loadNeedImg(img) { // 判定哪些img元素须要加载
        const windowPageYOffset = window.pageYOffset; // 滚动条间隔窗口顶部的偏移量
        const offsetAddInner = window.pageYOffset + window.innerHeight; // window.innerHeight返回窗口的文档表现区的高度
        const imgOffsetTop = img.offset().top; // 当前img元素间隔窗口顶部的偏移量
        return (
          imgOffsetTop >= windowPageYOffset && // 确保img元素在窗口内
          imgOffsetTop - self.sensitivity <= offsetAddInner //当前img元素是不是在窗口可见范围内，不可见返回:false
        );
      }
      function loadImg(img, index) {
        const imgUrl = img.attr(self.srcFlag);
        const imgLazy = img.attr('src');
        img.attr('src', imgUrl);
        img[0].onload ||  // 开始向服务器哀求加载图片
          ((img[0].onload = function() {
            $(this)
              .removeClass(self.class)
              .removeAttr(self.srcFlag),
            (self.imgListData[index] = null),
            (this.onerror = this.onload = null);
          }),
            (img[0].onerror = function() {
              (this.src = imgLazy),
              $(this)
                .removeClass(self.class)
                .removeAttr(self.srcFlag),
              (self.imgListData[index] = null),
              (this.onerror = this.onload = null);
            }));
      }
      self.imgListData.each(function(index, val) {
        if (!val) return;
        const img = $(val);
        if (!loadNeedImg(img)) return;
        const aa = img.attr(self.srcFlag);
        if (!img.attr(self.srcFlag)) return;// 判定是否有规定的picAddress属性，没有则退出当次循环
        loadImg(img, index);
      });
    },
  },
};
lazyLoadImg.initConfig();

（这里分析一下，网上有许多jQuery的.lazyload的包，但是个人使用过感觉兼容性和效果都巨差，故而这里提倡本身封装一个js）

我们可以将网络限速将online设成mid-tier mobile大概low-end mobile更轻易看到效果！如下：

分析实用场景，选择符合的方式才华将一个网站打造的更美满。
项目所在：南阳理工学院-优C社团