懒加载和预加载
提到前端性能优化中图片资源的优化，懒加载和预加载就不能不说
懒加载：
1概念：
访问页面时，先把img元素的背景图片src替换成一张占位图，这样只需要请求一次，当图片出现在浏览器的可视区域内时，再设置图片的真实路径，显示图片。
2优点：
页面长图片多时，在首次载入时一次性加载会耗费时间长，使用懒加载可以使页面加载速度快、减轻服务器的压力、节约流量。
3步骤：
页面中的img元素，若没有src属性，浏览器就不会发出请求去下载图片，只有通过javascript设置了图片路径，浏览器才会发送请求。
1)懒加载先在页面中把需要延迟加载的图片统一使用一张占位符进行占位，把真正的路径存在元素“data-url”属性里。
2)页面加载完成后，通过scrollTop判断图片是否在用户的视野，如果在，则将data-url的值取出来存放到src中。
3)在滚轮事件中重复判断图片是否进入视中，如果在，则将data-url的值取出来存放到src中。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>懒加载测试</title> <style type="text/css"> img{ display: block; height: 900px; width: 100%; } </style> <script type="text/javascript" src="jquery-2.2.3.min.js"></script> </head> <body> <div class="lazyload"> 试试看页面是否加载 <img src="" alt=""> <img src="" alt=""> <img src="" alt=""> <img src="" alt=""> <img src="" alt=""> <img src="" alt=""> <img src="" alt=""> <img src="" alt=""> <img src="" alt=""> <img src="" alt=""> <img src="" alt=""> <img src="" alt=""> <img src="" alt=""> <img src="" alt=""> <img src="" alt=""> <img src="" alt=""> <img src="" alt=""> <img src="" alt=""> <img src="" alt=""> <img src="" alt=""> <img src="" alt=""> <img src="" alt=""> <img src="" alt=""> <img src="" alt=""> <img src="" alt=""> <img src="" alt=""> <img src="" alt=""> <img src="" alt=""> </div> </body> <script type="text/javascript"> var pic=document.getElementsByTagName('img');
//这里是图片路径数组 也可以直接写到img标签的属性里面，就不用下面的for循环了 arr=['image/api_thumb_450 (1).jpg','image/api_thumb_450 (2).jpg','image/api_thumb_450 (3).jpg','image/api_thumb_450 (4).jpg']; for(var i=0,l=arr.length;i<l;i++){ //pic[i].setAttribute('src-data',arr[i]); pic[i].setAttribute('data-img',arr[i]); } /*亲测有效*/ var lazyload=(function(){ var clock; function init(){ $(window).on('scroll',function(){ if(clock){ clearTimeout(clock); } clock=setTimeout(function(){ checkShow(); },200); }) checkShow(); } function checkShow(){ $('.lazyload img').each(function(){ var $cur=$(this); if($cur.attr('isLoaded')){ return; }else{ } if(shouldShow($cur)){ showImg($cur); } }) } function shouldShow($node){ var scrollH=$(window).scrollTop(), winH=$(window).height(), top=$node.offset().top; if(top<winH+scrollH){ return true; }else{ return false; } } function showImg($node){ $node.attr('src',$node.attr('data-img')); $node.attr('isLoaded',true); } return { init:init } })() lazyload.init(); </script> </html>
来看看另一种方法，代码少了很多呢……
来自：https://www.cnblogs.com/Cathamerst/p/7445715.html
懒加载的要点：
1.图片进入可视区域之后请求图片资源
2.对于电商等图片较多，页面很长的业务场景很适用；
3.可以减少无效资源的加载
4.并发加载的资源过多会阻塞js的加载，影响网站的正常使用；
如何实现懒加载？要点就是html中img标签src属性为空，给一个data属性，里面存放图片真实地址，在需要的时候，动态的将这个地址赋予图片src属性。
如下所示：
<img src="" class="image-item" lazyload="true" data-original="http://pic26.nipic.com/20121213/6168183_004444903000_2.jpg" />
<!--lazyload用于判断是否被加载 data-original用于存储图片地址-->
类似上述代码所示，需要的时候，用js脚本控制图片的加载
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>懒加载测试</title> <style type="text/css"> img{ display: block; height: 900px; width: 100%; } </style> <script type="text/javascript" src="jquery-2.2.3.min.js"></script> </head> <body> <div class="lazyload"> 试试看页面是否加载 <img src="" alt=""> <img src="" alt=""> <img src="" alt=""> <img src="" alt=""> <img src="" alt=""> <img src="" alt=""> <img src="" alt=""> <img src="" alt=""> <img src="" alt=""> <img src="" alt=""> <img src="" alt=""> <img src="" alt=""> <img src="" alt=""> <img src="" alt=""> <img src="" alt=""> <img src="" alt=""> <img src="" alt=""> <img src="" alt=""> <img src="" alt=""> <img src="" alt=""> <img src="" alt=""> <img src="" alt=""> <img src="" alt=""> <img src="" alt=""> <img src="" alt=""> <img src="" alt=""> <img src="" alt=""> <img src="" alt=""> </div> </body> <script type="text/javascript"> var pic=document.getElementsByTagName('img'); arr=['image/api_thumb_450 (1).jpg','image/api_thumb_450 (2).jpg','image/api_thumb_450 (3).jpg','image/api_thumb_450 (4).jpg','image/api_thumb_450 (5).jpg','image/api_thumb_450 (6).jpg','image/api_thumb_450 (7).jpg','image/api_thumb_450.jpg','image/api_thumb_450 (8).jpg','image/api_thumb_450 (9).jpg','image/api_thumb_450 (10).jpg','image/api_thumb_450 (11).jpg','image/api_thumb_450 (12).jpg','image/api_thumb_450 (13).jpg','image/api_thumb_450 (14).jpg','image/api_thumb_450 (15).jpg','image/api_thumb_450 (16).jpg','image/api_thumb_450 (17).jpg','image/api_thumb_450 (18).jpg','image/api_thumb_450 (19).jpg','image/api_thumb_450 (20).jpg']; for(var i=0,l=arr.length;i<l;i++){ //pic[i].setAttribute('src-data',arr[i]); pic[i].setAttribute('data-img',arr[i]); pic[i].setAttribute('lazyload',true); } /*亲测有效*/ /*版本2*/ var viewHeight=document.documentElement.clientHeight;//可视区域的高度 function lazyload(){ //获取所有要进行懒加载的图片 var eles=document.querySelectorAll('img[data-img][lazyload]'); Array.prototype.forEach.call(eles,function(item,index){ var rect; if(item.dataset.img===''){ return; }else{ } rect=item.getBoundingClientRect(); //图片进入可视区域后便动态加载 if(rect.bottom>=0&&rect.top<viewHeight){ !function(){ var img=new Image(); img.src=item.dataset.img; img.onload=function(){ item.src=img.src; } item.removeAttribute('data-img'); item.removeAttribute('lazyload'); }(); }else{ } }) } lazyload(); document.addEventListener('scroll',lazyload); </script> </html>
