图片延时加载原理及应用

最新推荐文章于 2024-02-29 11:37:32 发布

xiaoTuiMao

最新推荐文章于 2024-02-29 11:37:32 发布

阅读量1.3k

点赞数

分类专栏：前端开发文章标签：图片流量 html

本文链接：https://blog.csdn.net/xiaoTuiMao/article/details/48048263

版权

前端开发专栏收录该内容

23 篇文章 0 订阅

订阅专栏

关于图片延时加载的基本理论：
当我们浏览一个页面时，我们有时候并不会看完一个网页的所有内容，那么我们在客户不浏览完所有内容的情况下，加载完所有的图片就会浪费流量，而且也会影响到网页的加载时间。为了解决这个问题，我们就设计了一种图片延时加载的机制，即当用户将页面快滑到图片的时候，我们开始加载图片，这样既省了流量，而且也不影响用户的体验

下面我就多篇延时加载举一个例子
首先，我们创建所需的HTML标签及样式

    <style type="text/css">
        body, div, img {
            margin: 0;
            padding: 0;
        }

        img {
            border: none;
        }

        #con {
            margin: 10px auto;
            padding: 15px 0 15px 15px;
            width: 630px;
            border: 1px dashed #ff3333;
            border-radius: 10px;
            overflow: hidden;
        }

        #con div {
            float: left;
            margin: 15px 15px 0 0;
            width: 300px;
            height: 150px;
            background: url("img/ddd.jpg") no-repeat;
        }

        #con div img {
            width: 300px;
            height: 150px;
            opacity: 0;
        }
    </style>
</head>
<body>
<div id="con"></div>

整体思路是这样的，我们先获取到装图片的大容器，然后创建装载每一个图片的div，让其占好位置，然后当用户滑动到当前这个div顶部的时候，开始加载图片。加载完成后显示出来，为了防止图片多次加载，出现闪屏的效果，加载完图片后我们添加一个标识，来防止我们多次加载
具体代码及注释如下

var date = [];
    for (var i = 0; i < 100; i++) {
        var ran = Math.round(Math.random() * 9 + 1);
        date[date.length] = "img/" + ran + ".jpg";
    }
    //创建占位置的div；
    var conBox = document.getElementById("con");
    var frg = document.createDocumentFragment();
    for (var i = 0; i < date.length; i++) {
        var imgBox = document.createElement("div");
        imgBox.trueSrc = date[i];
        frg.appendChild(imgBox);
    }
    conBox.appendChild(frg);
    //获取 浏览器的高度
    function getWin(attr) {
        return document.documentElement[attr] || document.body[attr];
    }
    //元素相对 浏览器的高度
    function offset(ele) {
        var h = ele.offsetTop;
        var l = ele.offsetLeft;
        var p = ele.offsetParent;
        while (p) {
            if (navigator.userAgent.indexOf("MSIE 8") > -1) {
                h += p.offsetTop;
                l += p.offsetLeft;
            } else {
                l += p.offsetLeft + p.clientLeft;
                h += p.offsetTop + p.clientTop
            }
            p = p.offsetParent;
        }
        return {top: h, left: l};
    }
    //加载 图片方法
    function move(oImg) {
        var n = 0;
        var timer = window.setInterval(function () {
            oImg.style.opacity = n;
            if (n > 0.99) {
                oImg.style.opacity = 1;
                clearInterval(timer);
            }
            n += 0.01;
        }, 10)
    }
    function loadImg(imgBox) {
        var oImg = new Image;
        oImg.src = imgBox.trueSrc;
        oImg.onload = function () {
            imgBox.appendChild(oImg);
            imgBox.loadOk = true;
            move(oImg);
        }
    }
    //给window绑定 方法
    function start() {
        var cur = getWin("scrollTop") + getWin("clientHeight");
        var imgBox = conBox.getElementsByTagName("div");
        for (var i = 0; i < imgBox.length; i++) {
            var temp = imgBox[i];
            console.log(imgBox.length);
            if (cur > offset(temp).top) {
                if (!temp.loadOk) {
                    loadImg(temp);

                }
            }
        }
    }
    window.onload = start;
    window.onscroll = start;

xiaoTuiMao

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
图片延时加载原理及应用

关于图片延时加载的基本理论：当我们浏览一个页面时，我们有时候并不会看完一个网页的所有内容，那么我们在客户不浏览完所有内容的情况下，加载完所有的图片就会浪费流量，而且也会影响到网页的加载时间。为了解决这个问题，我们就设计了一种图片延时加载的机制，即当用户将页面快滑到图片的时候，我们开始加载图片，这样既省了流量，而且也不影响用户的体验下面我就多篇延时加载举一个例子首先，我们创建所需的HTML
复制链接

扫一扫