图片的预加载和懒加载

最新推荐文章于 2024-07-18 11:48:33 发布

秋风恨你不惜他

最新推荐文章于 2024-07-18 11:48:33 发布

阅读量121

点赞数

分类专栏： javaScript 文章标签： javascript chrome

本文链接：https://blog.csdn.net/qq_58984486/article/details/118679724

版权

javaScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

图片的预加载和懒加载

图片的预加载

//准备三张照片，相对路径分别为../img/x.png
//第一张照片所以定义num=1
		var num = 1;
		//存放图片对象的数组
        var list = [];
        loadImage();
        function loadImage() {
            var img = new Image();
            img.addEventListener("load", loadHandler);
            //加载第一张照片触发load事件
            img.src = "../img/" + num + ".jpg";
        }
        function loadHandler(e) {
            list.push(this.cloneNode());//复制当前图片元素
            num++;
            if (num > 3) { console.log(list); return; }
            this.src = "../img/" + num + ".jpg"; //修改地址继续后触发load事件，加载下一张
        }

图片懒加载

//懒加载的一般模式时先将图片地址放在自定义的属性data-src中，等需要加载时将data-src的值取出，再赋值给src属性，进行加载。下面的例子在进行懒加载会有一个好处：利用观察者模式，当进入观察时（进入视口）会进行图片的加载，在加载完成后，我们可以选择结束观察者模式，这样就算已加载的图片频繁的进出视口，也不会再进行加载，造成资源浪费，浪费性能
<body>
    <div>
        <img src="" data-src="../img/1.jpg" alt="">
        <img src="" data-src="../img/2.jpg" alt="">
        <img src="" data-src="../img/3.jpg" alt="">
    </div>
    <script>
        let  i=0
        //获取所有的图片对象
        const img=document.querySelectorAll('img')
        const observe=new IntersectionObserver((entries )=>{
            //entries[0].isIntersecting 图片被观察到时为true，为观察到是为false
            console.log(entries[0].isIntersecting);
            if(entries[0].isIntersecting){
            const res= img[i].getAttribute('data-src')
            img[i].setAttribute('src',res)
            console.log(res);
               // 结束观察者模式
            observe.unobserve(img[i])
             i++
            }
		 })
img.forEach(item=>{
   // 设置观察每一个图片
    observe.observe(item)
})
    </script>
</body>

1.观察者模式的图片懒加载的好处是一次图片申请过后，不会再次请求加载图片，因为在观察到图片后就给图片的src赋值，然后结束观察者模式，不会造成后续的再次调用
2.图片的预加载和懒加载的不同点：图片的预加载是提前加载图片，将图片缓存到本地，用户想要看见图片是直接在本地的缓存中加载，这样对于服务器的压力较大。而图片的懒加载则是延迟加载，用户使用的时候再向服务器发送去请求，这样对服务器的压力小。

秋风恨你不惜他

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
图片的预加载和懒加载

图片的预加载和懒加载图片的预加载//准备三张照片，相对路径分别为../img/x.png//第一张照片所以定义num=1 var num = 1; //存放图片对象的数组 var list = []; loadImage(); function loadImage() { var img = new Image(); img.addEventListener("load", loadHandle.
复制链接

扫一扫