前端常用技术之图片懒加载

最新推荐文章于 2024-02-26 15:33:40 发布

Mr_董

最新推荐文章于 2024-02-26 15:33:40 发布

阅读量3k

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/donggx/article/details/53388628

版权

css 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

目前，一些图片类型的网站上，在图片加载时均采用了一种名为懒加载的方式，具体表现为，当页面被请求时，只加载可视区域的图片，其它部分的图片则不加载，只有这些图片出现在可视区域时才会动态加载这些图片，从而节约了网络带宽和提高了初次加载的速度，。避免网页打开时加载过多资源，让用户等待太久。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>图片懒加载实例</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #div1 {
            width: 520px;
            margin: 30px auto;
            border: 1px solid red;
            overflow: hidden;
        }

        li {
            width: 160px;
            height: 160px;
            float: left;
            list-style: none;
            margin: 5px;
            background: url(loading.gif) center center no-repeat;
            border: 1px dashed green;
        }
        img{
            width:100%
        }
    </style>
</head>
<body>
    <div id="div1">
        <ul>
            <li data-src="http://4493bz.1985t.com/uploads/allimg/140710/1-140G0161612.jpg"></li>
            <li data-src="http://4493bz.1985t.com/uploads/allimg/140628/1-14062Q33R6.jpg"></li>
            <li data-src="http://4493bz.1985t.com/uploads/allimg/140628/1-14062Q33242.jpg"></li>
            <li data-src="http://img.bizhi.sogou.com/images/2014/12/10/997251.jpg"></li>
            <li data-src="http://dl.bizhi.sogou.com/images/2014/12/02/986640.jpg"></li>
            <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170473_s_90_2_219x160.jpg"></li>
            <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170475_s_90_2_219x160.jpg"></li>
            <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170477_s_90_2_219x160.jpg"></li>
            <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li>
            <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li>
            <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li>
            <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li>
            <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li>
            <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li>
            <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li>
            <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li>
            <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li>
            <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li>
            <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li>
            <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li>
            <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li>
            <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li>
            <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li>
            <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li>
            <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li>
            <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li>
            <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li>
        </ul>
    </div>
    <script>
        function setImg(index){
            var oDiv=document.getElementById("div1")
            var oUl=oDiv.children[0];
            var aLi=oUl.children;
            if (aLi[index].dataset) {
                var src=aLi[index].dataset.src;
            } else{
                var src=aLi[index].getAttribute('data-src');
            }
            var oImg=document.createElement('img');
            oImg.src=src;
            if (aLi[index].children.length==0) {
                aLi[index].appendChild(oImg);
            }
        }
        function getH(obj) {
            var h = 0;
            while (obj) {
                h += obj.offsetTop;
                obj = obj.offsetParent;
            }
            return h;
        }
        window.onscroll = function () {
            var oDiv = document.getElementById('div1');
            var oUl = oDiv.children[0];
            var aLi = oUl.children;

            for (var i = 0, l = aLi.length; i < l; i++) {
                var oLi = aLi[i];
                //检查oLi是否在可视区域
                var t = document.documentElement.clientHeight + (document.documentElement.scrollTop || document.body.scrollTop);
                var h = getH(oLi);
                if (h < t) {
                    setTimeout("setImg(" + i + ")", 500);
                }
            }
        };
        window.onload = function () {
            window.onscroll();
        };
    </script>
</body>
</html>

Mr_董

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端常用技术之图片懒加载

目前，一些图片类型的网站上，在图片加载时均采用了一种名为懒加载的方式，具体表现为，当页面被请求时，只加载可视区域的图片，其它部分的图片则不加载，只有这些图片出现在可视区域时才会动态加载这些图片，从而节约了网络带宽和提高了初次加载的速度，。避免网页打开时加载过多资源，让用户等待太久。图片懒加载实例 * { margin:
复制链接

扫一扫