js图片预加载和图片懒加载

最新推荐文章于 2023-12-01 06:30:00 发布

della_uii

最新推荐文章于 2023-12-01 06:30:00 发布

阅读量932

点赞数

分类专栏： JavaScript 文章标签：预加载懒加载

本文链接：https://blog.csdn.net/Della_UI/article/details/53152677

版权

JavaScript 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

预加载：提前加载图片，当用户需要查看时可直接从本地缓存中渲染。
预加载是牺牲服务器前端性能，换取更好的用户体验，这样可以使用户的操作得到最快的反映。
实现预加载常用方式是：new Image()。
Image对象的src属性 : 当我们给Image对象的src属性赋值一个url的时候，这个Image对象就去会加载url资源，加载完成以后的资源被保存到浏览器的缓存文件夹里面，下次如果我们要去调用这个url地址的时候，直接是从缓存文件夹读取到的，所以速度很快。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <script type="text/javascript">
        window.onload=function(){
            var oImage=new Image();
            var arr=[
                'http://img7.yiihuu.com/990X524/upimg/works/2012/06/26/112417qyZ.jpg?auto=w',
                'http://img05.tooopen.com/products/20140421/86777658.jpg',
                'http://d04.res.meilishuo.net/pic/_o/68/e1/6b50f891e40dfbe88fd272c81581_570_455.c6.jpg_cef0a913_s1_q0_150_5_0_226_800.jpg',
                'http://image.tuolar.com/img/uimg/201004/17/7/ztr7r1271502487_300.jpg',
                'http://img1.touxiang.cn/uploads/20120609/09-034337_553.jpg',
                'http://img05.tooopen.com/products/20140421/61637868.jpg'
            ]

            var iCur=0;

            preLoadImg();

            function preLoadImg(){
                oImage.src=arr[iCur];

                oImage.onload=function(){
                    iCur++;
                    if (iCur<arr.length) {
                        preLoadImg();
                    }
                    document.title = iCur + ' / ' + arr.length;
                }

            }

            var oImg=document.getElementById("img1");
            var i=0;

            oImg.onclick=function(){
                i++;
                if (i<arr.length) {
                    oImg.src=arr[i];
                }

            }

        }
    </script>
    <body>
        <img id="img1" src="http://img7.yiihuu.com/990X524/upimg/works/2012/06/26/112417qyZ.jpg?auto=w" />
    </body>
</html>

懒加载也叫延迟加载：延迟加载图片或符合某些条件时才加载某些图片。

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

可视区加载实现方式：即仅加载用户可以看到的区域，这个主要由监控滚动条来实现，一般会在距用户看到某图片前一定距离便开始加载，这样能保证用户拉下时正好能看到图片。

步骤：
1、网页中的图片，都设为同一张很小的图片（src=”img/white.JPG”）。
2、给图片增加 _src=”img/1.jpg” 的属性，保存这张图片的真实地址。
3、当滚动条到达用户可视区域后，将_src的属性值赋值给src。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            img{
                display: block;
            }
            #ul1{
                width: 808px;
                margin: 0 auto;
                list-style: none;
            }
            #ul1 li{
                float: left;
                margin: 10px;
                border: 1px solid olivedrab;
            }
            #ul1 li img{
                width: 180px;
                height: 180px;
            }

        </style>
        <script type="text/javascript">
            window.onload=function(){
                var oUl=document.getElementById("ul1");
                var aImg=oUl.getElementsByTagName('img');
                var iLen=aImg.length;

                showImg();
                window.onscroll=showImg;

                function showImg(){
                    var scrollTop=document.documentElement.scrollTop || document.body.scrollTop;

                    for (var i=0; i<iLen; i++) {
                        //!aImg[i]表示图片已经被加载过，则无需再加载
                        if ( !aImg[i].isLoad && getTop(aImg[i])<scrollTop+document.documentElement.clientHeight) {
                            aImg[i].src=aImg[i].getAttribute('_src');
                            aImg[i].isLoad=true;
                        }
                    }
                }

                //获取obj到页面上边框的绝对距离
                function getTop(obj){
                    var iTop=0;
                    while(obj){
                        iTop+=obj.offsetTop;
                        obj=obj.offsetParent;
                    }
                    return iTop;
                }

            }
        </script>
    </head>
    <body>
        <ul id="ul1">
            <li><img _src="img/2.jpg" src="img/white.JPG"/></li>
            <li><img _src="img/3.jpg" src="img/white.JPG"/></li>
            <li><img _src="img/4.jpg" src="img/white.JPG"/></li>
            <li><img _src="img/3.jpg" src="img/white.JPG"/></li>
            <li><img _src="img/4.jpg" src="img/white.JPG"/></li>
            <li><img _src="img/2.jpg" src="img/white.JPG"/></li>
            <li><img _src="img/3.jpg" src="img/white.JPG"/></li>
            <li><img _src="img/4.jpg" src="img/white.JPG"/></li>
            <li><img _src="img/4.jpg" src="img/white.JPG"/></li>
            <li><img _src="img/3.jpg" src="img/white.JPG"/></li>
            <li><img _src="img/4.jpg" src="img/white.JPG"/></li>
            <li><img _src="img/2.jpg" src="img/white.JPG"/></li>
            <li><img _src="img/3.jpg" src="img/white.JPG"/></li>
            <li><img _src="img/4.jpg" src="img/white.JPG"/></li>
            <li><img _src="img/3.jpg" src="img/white.JPG"/></li>
            <li><img _src="img/4.jpg" src="img/white.JPG"/></li>
            <li><img _src="img/2.jpg" src="img/white.JPG"/></li>
            <li><img _src="img/3.jpg" src="img/white.JPG"/></li>
            <li><img _src="img/4.jpg" src="img/white.JPG"/></li>
            <li><img _src="img/3.jpg" src="img/white.JPG"/></li>
            <li><img _src="img/4.jpg" src="img/white.JPG"/></li>
            <li><img _src="img/2.jpg" src="img/white.JPG"/></li>
            <li><img _src="img/3.jpg" src="img/white.JPG"/></li>
            <li><img _src="img/4.jpg" src="img/white.JPG"/></li>
        </ul>
    </body>
</html>

della_uii

关注

0
点赞
踩
1

收藏

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

预加载：提前加载图片，当用户需要查看时可直接从本地缓存中渲染。预加载是牺牲服务器前端性能，换取更好的用户体验，这样可以使用户的操作得到最快的反映。实现预加载常用方式是：new Image()。 Image对象的src属性 : 当我们给Image对象的src属性赋值一个url的时候，这个Image对象就去会加载url资源，加载完成以后的资源被保存到浏览器的缓存文件夹里面，下次如果我们要去调用
复制链接

扫一扫

专栏目录