98JS原生：多图片延迟加载

最新推荐文章于 2024-06-07 09:31:01 发布

weixin_30446613

最新推荐文章于 2024-06-07 09:31:01 发布

阅读量120

点赞数

原文链接：http://www.cnblogs.com/gushixianqiancheng/p/10967200.html

版权

有时一个网页很长，如果用户一打开网页，我们就把所有图片给他加载下来，那么如果用户看不到底就关闭了这个网页，那么就会造成性能的浪费。因此，用户下拉到哪个位置，我们就下载到哪个位置，这就是延迟加载。本实例：当图片所在位置的1/3以上暴露在窗口时，才加载这张图片。
```html:run
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        img{
            border: none;
        }
        div{
            margin:0 auto;
            width: 800px;
            height: 400px;
            background: url("http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12227263_12227263_1441518060703_mthumb.jpg") no-repeat center #e1e1e1;
        }
        div img{
            width: 100%;
            height: 100%;
        }
        p{
            width:800px;
            height:600px;
            line-height:60px;
            background: lightgrey;
            font-size:30px;
            margin:0 auto;
            text-indent:13px;
        }
    </style>
</head>
<body>
<p>需要如下操作，才可以“效果预览”：<br/>（1）点击“效果预览”;<br/>（2）点击“效果预览”正右侧的“对角线箭头图标”;<br/>（3）滚动鼠标滚轮。</p>
</body>
<script>
    var data=[
        {src:'http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12227263_12227263_1441518066203_mthumb.jpg'},
        {src:'http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12227263_12227263_1441518066203_mthumb.jpg'},
        {src:'http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12227263_12227263_1441518066203_mthumb.jpg'},
        {src:'http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12227263_12227263_1441518066203_mthumb.jpg'},
        {src:'http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12227263_12227263_1441518066203_mthumb.jpg'},
        {src:'http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12227263_12227263_1441518066203_mthumb.jpg'},
        {src:'http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12227263_12227263_1441518066203_mthumb.jpg'},
        {src:'http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12227263_12227263_1441518066203_mthumb.jpg'},
        {src:'http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12227263_12227263_1441518066203_mthumb.jpg'}
    ];
    var aDiv=document.getElementsByTagName('div');
    var aImg=document.getElementsByTagName('img');
    function bind(){
        var frg=document.createDocumentFragment();
        for(var i=0;i<data.length;i++){
            var div=document.createElement("div");
            div.innerHTML="<img realImg='"+data[i].src+"' alt=''/>";
            frg.appendChild(div);
        }
        document.body.appendChild(frg);
        frg=null;
    }
    bind();
    window.οnscrοll=function(){
        var scrollBottom=document.documentElement.scrollTop||document.body.scrollTop+
                document.documentElement.clientHeight||document.body.clientHeight;
        for(var i=0; i<aDiv.length; i++){
            var imgPosition=aDiv[i].offsetTop+aDiv[i].offsetHeight/5;
            if(imgPosition<scrollBottom){
                aImg[i].src=aImg[i].getAttribute('realImg');
            }
        }
    };
</script>
</html>
```

转载于:https://www.cnblogs.com/gushixianqiancheng/p/10967200.html

weixin_30446613

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
98JS原生：多图片延迟加载

有时一个网页很长，如果用户一打开网页，我们就把所有图片给他加载下来，那么如果用户看不到底就关闭了这个网页，那么就会造成性能的浪费。因此，用户下拉到哪个位置，我们就下载到哪个位置，这就是延迟加载。本实例：当图片所在位置的1/3以上暴露在窗口时，才加载这张图片。```html:run<!DOCTYPE html><html lang="en"><head> &...
复制链接

扫一扫