前端开发js实现图片延迟加载

网站前端开发之图片|web前端开发工程师图片|前端开发获取图片的网站

原理和实现方法

延迟加载是通过自定义属性,把真实的img地址存到自定义属性中,如data-url=”img”,而图片真正的src存的是loading的图片,如src=”loading.gif”,通过js来获取窗口的偏移量,当图片在窗口中的时候,再动态将data-url的值赋给src;
延迟加载的原理其实很简单的,因为浏览器解析html的时候,会把img中所有的src都加载,但是自定义属性中的图片是不会加载的,所有我们就采用了替换,这样浏览器刚打开页面加载的是loading的图标,而不是真正的图片,这样就能提高网站的加载速度。

实际项目应用中,可以先利用ajax先把图片的实际src赋给data-url,然后滚动带图片窗口时,在实时的替换img的src。

具体代码如下:

<!DOCTYPE html>
<head>
    <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
    <title>web前端开发基础电子版教材:图片延迟加载</title>
    <style>
        img {
            display: block;
            width: 350px;
            height: 245px;
            background: url(data/attachment/album/201412/18/090710jlau0l5c0bauwv56.gif) center center no-repeat
        }
    </style>
</head>
<body>
    <img src=”” alt=”” data-url=”http://img4.duitang.com/uploads/item/201405/12/20140512210327_dTshi.jpeg” class=”test”>
    <br>
    <img src=”” alt=”” data-url=”http://img4.duitang.com/uploads/item/201405/12/20140512210327_dTshi.jpeg” class=”test”>
    <br>
    <img src=”” alt=”” data-url=”http://img4.duitang.com/uploads/item/201405/12/20140512210327_dTshi.jpeg” class=”test”>
    <br>
    <img src=”” alt=”” data-url=”http://img4.duitang.com/uploads/item/201405/12/20140512210327_dTshi.jpeg” class=”test”>
    <br>
    <img src=”” alt=”” data-url=”http://img4.duitang.com/uploads/item/201405/12/20140512210327_dTshi.jpeg” class=”test”>
    <br>
    <img src=”” alt=”” data-url=”http://img4.duitang.com/uploads/item/201405/12/20140512210327_dTshi.jpeg” class=”test”>
    <br>
    <img src=”” alt=”” data-url=”http://img4.duitang.com/uploads/item/201405/12/20140512210327_dTshi.jpeg” class=”test”>
    <br>
    <img src=”” alt=”” data-url=”http://img4.duitang.com/uploads/item/201405/12/20140512210327_dTshi.jpeg” class=”test”>
    <br>
    <img src=”” alt=”” data-url=”http://img4.duitang.com/uploads/item/201405/12/20140512210327_dTshi.jpeg” class=”test”>
    <br>
    <img src=”” alt=”” data-url=”http://img4.duitang.com/uploads/item/201405/12/20140512210327_dTshi.jpeg” class=”test”>
    <br>
    <img src=”” alt=”” data-url=”http://img4.duitang.com/uploads/item/201405/12/20140512210327_dTshi.jpeg” class=”test”>
    <br>
    <img src=”” alt=”” data-url=”http://img4.duitang.com/uploads/item/201405/12/20140512210327_dTshi.jpeg” class=”test”>
    <br>
    <img src=”” alt=”” data-url=”http://img4.duitang.com/uploads/item/201405/12/20140512210327_dTshi.jpeg” class=”test”>
    <br>
    <img src=”” alt=”” data-url=”http://img4.duitang.com/uploads/item/201405/12/20140512210327_dTshi.jpeg” class=”test”>
    <br>
    <img src=”” alt=”” data-url=”http://img4.duitang.com/uploads/item/201405/12/20140512210327_dTshi.jpeg” class=”test”>
    <br>
    <img src=”” alt=”” data-url=”http://img4.duitang.com/uploads/item/201405/12/20140512210327_dTshi.jpeg” class=”test”>
    <br>
    <script type=”text/javascript”>
        var obj = document.getElementsByClassName(“test”), i, t, h, timer;
        for (i = 0; i < obj.length; i++) {
            obj[i].url = obj[i].getAttribute(“data-url”);
            obj[i].o = obj[i].offsetTop;
            obj[i].again = false; //防止浏览器一直加载图片,这样图片加载成功后,滚动浏览器的时候就不会再加载图片了;
        }
        h = document.documentElement.clientHeight || 900;
        var test = function (obj) {
            t = document.body.scrollTop || document.documentElement.scrollTop;
            if (t + h > obj.o && obj.o > t) {
                obj.src = obj.url;
                obj.again = true;
            }
        }
        window.onscroll = window.onload = function () {
            clearTimeout(timer);
            timer = setTimeout(function () {
                for (i = 0; i < obj.length; i++) {
                    if (!obj[i].again) {
                        test(obj[i]);
                    }
                }
            }, 500)
        };
    </script>
</body>
</html>

前端开发网站标题图片添加|前端开发中如何固定图片位置|前端开发如何制作psd图片大小

» 本文来自:前端开发者 » 《前端开发js实现图片延迟加载》
» 本文链接地址:https://www.rokub.com/4537.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!