图片懒加载的使用方法?

最新推荐文章于 2024-05-30 17:38:42 发布

mzrxLXR

最新推荐文章于 2024-05-30 17:38:42 发布

阅读量409

点赞数

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

本文链接：https://blog.csdn.net/mzrxLXR/article/details/81507501

版权

js 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

图片懒加载

图片懒加载实现原理: 可以图片src配置一个假的地址，同事给添加一个data-url属性指向真是url地址，当图片快要显示的时候将url地址替换成data-url的属性。

懒加载实现原理

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>LazyLoad</title>
        <style type="text/css">
            img {
                display: block;
                width: 500px;
                height: 400px;
            }
        </style>
    </head>
    <body>
        <img src="" guoyu-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1497274158197&di=8845befd9fbda1e99e565b9c2298be50&imgtype=0&src=http%3A%2F%2Fuploads.xuexila.com%2Fallimg%2F1503%2F626-15031G42255b3.jpg">
        <img src="" guoyu-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1497274158196&di=4a38d248001c145c5b4dd31474dedf41&imgtype=0&src=http%3A%2F%2Fpic29.nipic.com%2F20130512%2F11178195_152908769116_2.jpg">
        <img src="" guoyu-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1497274158196&di=b39e8b14d214b7aa518d7a8328939efb&imgtype=0&src=http%3A%2F%2Fimage16-c.poco.cn%2Fmypoco%2Fmyphoto%2F20141114%2F12%2F4567377520141114124637053.jpg%3F1024x684_120">
        <img src="" guoyu-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1497274158196&di=f2e7a6ffbfa3f92025c91e6180b5e317&imgtype=0&src=http%3A%2F%2Ffile31.mafengwo.net%2FM00%2F3F%2F26%2FwKgBs1gXBQuAPWGGABOK4vbGpt412.groupinfo.w600.jpeg">
        <img src="" guoyu-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1497274158195&di=6a073a070b9cea1214efc0994ed6dde1&imgtype=0&src=http%3A%2F%2Fimages3.ctrip.com%2Fwri%2Fimages%2F200610%2F100602312604121954734.jpg">
        <img src="" guoyu-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1497274158195&di=a9436d83f55b301d1df9cd24f6e367e7&imgtype=0&src=http%3A%2F%2Fcyjctrip.qiniudn.com%2F69015%2F1379755311203p184vt4juft5p1t8q1andgp5ijn11.jpg">
    </body>
</html>
<script type="text/javascript">
    //获取img
    var aImg = document.querySelectorAll('img');

    //这是写出了img的数量长度
    var len = aImg.length;
    var n = 0; //存储图片加载到的位置，避免每次都从第一张图片开始遍历
    // 懒加载实现
    function startLazyLoad() {
        var seeHeight = document.documentElement.clientHeight;
        // 这是一个兼容方面问题 因为谷歌只认识document.body.scrollTop
        var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;  
        console.log(scrollTop)   // 滚动条距离顶部的距离
        console.log(seeHeight)  // 可见区域高度
        for(var i = n; i < len; i++) {
            console.log(aImg[i].offsetHeight) // 图片高度
            if(aImg[i].offsetTop < seeHeight + scrollTop) {
            console.log('内元素距离顶部的高度',aImg[i].offsetTop)
                if(aImg[i].getAttribute('src') == '') {
                    aImg[i].src = aImg[i].getAttribute('guoyu-src');
                }
                n = i + 1;
                console.log('n = ' + n);
            }
        }
    }

    // 默认开始加载一次
    startLazyLoad()
    // 每次滚动的时候实现加载
    window.onscroll = function() {
        startLazyLoad()
    };

</script>

mzrxLXR

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
图片懒加载的使用方法?

图片懒加载图片懒加载实现原理: 可以图片src配置一个假的地址，同事给添加一个data-url属性指向真是url地址，当图片快要显示的时候将url地址替换成data-url的属性。懒加载实现原理&amp;lt;!DOCTYPE html&amp;gt;&amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;utf-8&
复制链接

扫一扫

专栏目录