JavaScript 图片懒加载和预加载

JavaScript 图片懒加载和预加载

一.背景

目前各种电商网站层出不穷,大家都知道,电商网站的图片量是非常之多的,其实也不只是电商网站,更有些其他的,图片密集度比较大的网站.由于图片数目较大,等待时间长,并且加载过多的资源,导致些资源浪费,那这种情况,用户体验度就是非常差的了,所以这个时候,懒加载和预加载就是个非常好的解决方案

二.懒加载

懒加载:又名延迟加载(简称lazyload),可以在长网页中延迟加载图像,是对网页性能优化的的一种方案,它的核心是按需加载

1.为什么要使用懒加载?

(1) 提升用户体验 如果一个长网页,一次性把图片全部加载出来,图片密集度非常之高,数目较大,等待时间之久,用户肯定不买账,直接关闭网页走人.

(2) 减少无效资源加载 按需要去加载数据,没有进入视口的不需要加载,你根本没看他们，加载出来干嘛.所以明显减少服务器的压力和流量,也能减少浏览器的渲染负担

(3) 防止并发加载的资源过多,阻塞js的加载 影响网站的正常使用

2.实现懒加载思路

(1) 利用Image的src有图片地址时才会加载图片

(2) 图片的初始状态不设置src属性,使用一个自定义属性保存图片路径 如data-src

(3) 图片进入窗口可视区时给src赋值

(4) window.onscroll判断图片是否进入窗口:图片到body的offsetTop<(窗口高+scrollTop)

借用网上的一张图片:

3.懒加载原理

将页面上的图片src属性设置为空,然后将图片的真实路径存放在当前图片标签的自定义属性data-src上,当页面滚动的时候,需要去监听scroll事件,在scroll事件的回调中,判断我们的懒加载的图片是否进入可视区域,如果图片在可视区域就将图片的src属性设置为data-src的值,然后这样就实现延迟加载

注意:如果是异步加载的数据,我们实际上只需要做一次请求即可,不需要多次请求

4.实现懒加载

//css  
<style>
    .image-item {
      display: block;
      margin-bottom: 50px;
      height: 200px;
      /* 一定记得设置图片高度 */
   }
</style>

//html
<img src="" class="image-item" lazyload="true" data-src="https://image.ztemall.com/e96bedfde1da7fe4430015588ded9e55.jpg" 
<img src="" class="image-item" lazyload="true" data-src="https://image.ztemall.com/f4eb114554ae8d3d11a11bf0fa436b4a.jpg" 
<img src="" class="image-item" lazyload="true" data-src="https://image.ztemall.com/4a8fb03ec68c9fa2fdc95a6f40b9f781.jpg" 
<img src="" class="image-item" lazyload="true" data-src="https://image.ztemall.com/4040bc0eca9d1e416fdf92c15e44b932.jpg" 
<img src="" class="image-item" lazyload="true" data-src="https://image.ztemall.com/5c428b3ec1963741846e674ef27f7fe2.jpg" 
<img src="" class="image-item" lazyload="true" data-src="https://image.ztemall.com/2d5a291001b0a7dcb7b41d5a990224c1.jpg" 
<img src="" class="image-item" lazyload="true" data-src="https://image.ztemall.com/e96bedfde1da7fe4430015588ded9e55.jpg" 
<img src="" class="image-item" lazyload="true" data-src="https://image.ztemall.com/e96bedfde1da7fe4430015588ded9e55.jpg" 
<img src="" class="image-item" lazyload="true" data-src="https://image.ztemall.com/e96bedfde1da7fe4430015588ded9e55.jpg" 
<img src="" class="image-item" lazyload="true" data-src="https://image.ztemall.com/e96bedfde1da7fe4430015588ded9e55.jpg" 
<img src="" class="image-item" lazyload="true" data-src="https://image.ztemall.com/e96bedfde1da7fe4430015588ded9e55.jpg" 
<img src="" class="image-item" lazyload="true" data-src="https://image.ztemall.com/e96bedfde1da7fe4430015588ded9e55.jpg" 

//js
<script>
    var viewHeight = document.documentElement.clientHeight;//获取可视区高度
    function lazyload() {
        var eleImgs= document.querySelectorAll('img[data-src][lazyload]');
        eleImgs.forEach(function (item, index) {
            //如果data-src属性没有值,直接返回
            if (item.dataset.src === "")
                return;
            // 用于获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置
            var rect = item.getBoundingClientRect();
            /
            if (rect.bottom >= 0 && rect.top < viewHeight) {
                (function () {
                    var img = new Image();
                    img.src = item.dataset.src;
                    img.onload = function () {
                        item.src = img.src;
                    }
                    item.removeAttribute("data-src");//移除属性，下次不再遍历
                    item.removeAttribute("lazyload");
                })()
            }
        })
    }
    lazyload();//刚开始还没滚动屏幕时，要先触发一次函数，初始化首页的页面图片
    document.addEventListener("scroll", lazyload);
</script>

三.预加载

预加载:提前加载图片,当用户需要查看时,直接从本地缓存中去渲染

资源预加载是网页的另一个性能优化技术,我们可以使用该技术来预先告知浏览器某些资源可能在将来会被使用到.

1.为什么要使用预加载

在网页全部加载之前,对一些主要内容进行加载,提供给用户更好的体验,减少等待的时间,如果一个长页面,过于庞大,没有使用预加载,页面就会长时间展现为一片空白,直到所有内容加载完毕

2.实现预加载思路

(1) 创建好要显示的图片节点1

(2) 创建用来加载图片的节点2

(3) 监听节点2的onload事件

(4) 返回一个对象,包含一个设置图片src的方法,节点1显示本地图片,节点2加载真正的资源

3.实现预加载常见方法

1.使用HTML标签

<img src="https://image.ztemall.com/e96bedfde1da7fe4430015588ded9e55.jpg" style="display:none"/>

2.使用Image对象

var image= new Image()
image.src="https://image.ztemall.com/e96bedfde1da7fe4430015588ded9e55.jpg"

3.使用ajax

这里不做介绍,会存在一些跨域问题

4.使用PreloadJS库

可以参考PreloadJS库

PreloadJS提供了一种预加载内容的一致方式，以便在HTML应用程序中使用。预加载可以使用HTML标签以及XHR来完成。默认情况下，PreloadJS会尝试使用XHR加载内容，因为它提供了对进度和完成事件的更好支持，但是由于跨域问题，使用基于标记的加载可能更好。

//使用preload.js
var queue=new createjs.LoadQueue();//默认是xhr对象，如果是new createjs.LoadQueue(false)是指使用HTML标签，可以跨域
queue.on("complete",handleComplete,this);
queue.loadManifest([
{id:"myImage",src:"http://pic26.nipic.com/20121213/6168183  0044449030002.jpg"},
{id："myImage2"，src:"http://pic9.nipic.com/20100814/2839526  1931471581702.jpg"}
]);
function handleComplete(){
  var image=queue.getResuLt("myImage");
  document.body.appendChild(image);
}

四.懒加载和预加载区别

1.概念

(1) 懒加载(延迟加载):图片延迟加载,当图片进入视口之后才加载

(2) 预加载:提前加载图片,当用户需要查看时,直接从本地缓存读取

2.区别

二者都是提高页面性能的有效办法,区别是一个是提前加载,一个是延迟加载甚至不加载,懒加载对服务器前端有一定的缓解压力的作用,预加载则会增加服务器前端的压力

3.意义

(1) 懒加载的主要目的是作为服务器前端的优化，减少请求数或延迟请求数。

(2) 预加载可以说是牺牲服务器前端性能，换取更好的用户体验，这样可以使用户的操作得到最快的反映