ECMAScript扩展 -12 【图片的预加载与懒加载】

最新推荐文章于 2024-05-17 07:40:24 发布

可乐雪碧薄荷糖

最新推荐文章于 2024-05-17 07:40:24 发布

阅读量188

点赞数 1

分类专栏： ECMAScript 文章标签： javascript html js

本文链接：https://blog.csdn.net/Yesterday_Tomorrow/article/details/109839705

版权

ECMAScript 专栏收录该内容

41 篇文章 1 订阅

订阅专栏

一.图片预加载

(1).多张图片

通过实例化Image对象调用onload方法来实现(onload之后)

var oDiv = document.getElementsByClassName('div')[0],
    img = ['https://zza.jpg', 'https://zzb.jpg'];
    img.forEach(function(elem){
        var oImg = new Image();
        oImg.src = elem;
        oImg.style.width = '100%';
        oImg.onload = function(){
            oDiv.appendChild(oImg);
        }
    })

(2).单张照片

var oDiv = document.getElementsByTagName('div')[0],
var oImg = new Image();
oImg.src = 'https://zzz.jpg';
oImg.style.width = '100%';
oImg.onload = function(){
    oDiv.appendChild(oImg);
}

二.图片懒加载

(1).实现思路

1.首先正常渲染，但是真正的路径要放到data-src中去

2.获取当前窗口高度，滚动高度

3.滚动时进行判读，如果当前元素距离窗口高度小于窗口高度+滚动高度则将data-src中的数据放到src中(记得要加上防抖或者节流)

4.删除data-src属性

5.让n来控制循环开始数(防止滚回去还会操作src的问题)

6.控制页面刷新后让滚动条复位(要加延迟否则可能不生效)

(2).实现代码

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
</head>
<body>
    <div>
        <ul class="img-list J_imgList"></ul>
    </div>
    <div style="display: none;" id="J_data">
      [{
      "img":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1581004370914&di=1724f04a58ec9850f168ed5a1faac7d1&imgtype=0&src=http%3A%2F%2Fthumb11.jfcdns.com%2Fthumb%2F2018-05%2Fbce5b03e404d7f24_600_566.jpeg","name":"图片1"
      },
        {
      "img":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1581004370914&di=1724f04a58ec9850f168ed5a1faac7d1&imgtype=0&src=http%3A%2F%2Fthumb11.jfcdns.com%2Fthumb%2F2018-05%2Fbce5b03e404d7f24_600_566.jpeg","name":"图片2"
      },
      {
      "img":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1581004370914&di=1724f04a58ec9850f168ed5a1faac7d1&imgtype=0&src=http%3A%2F%2Fthumb11.jfcdns.com%2Fthumb%2F2018-05%2Fbce5b03e404d7f24_600_566.jpeg","name":"图片3"
      },
      {
      "img":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1581004370914&di=1724f04a58ec9850f168ed5a1faac7d1&imgtype=0&src=http%3A%2F%2Fthumb11.jfcdns.com%2Fthumb%2F2018-05%2Fbce5b03e404d7f24_600_566.jpeg","name":"图片4"
      },
      {
      "img":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1581004370914&di=1724f04a58ec9850f168ed5a1faac7d1&imgtype=0&src=http%3A%2F%2Fthumb11.jfcdns.com%2Fthumb%2F2018-05%2Fbce5b03e404d7f24_600_566.jpeg","name":"图片5"
      },
      {
      "img":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1581004370914&di=1724f04a58ec9850f168ed5a1faac7d1&imgtype=0&src=http%3A%2F%2Fthumb11.jfcdns.com%2Fthumb%2F2018-05%2Fbce5b03e404d7f24_600_566.jpeg","name":"图片6"
      },
      {
      "img":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1581004370914&di=1724f04a58ec9850f168ed5a1faac7d1&imgtype=0&src=http%3A%2F%2Fthumb11.jfcdns.com%2Fthumb%2F2018-05%2Fbce5b03e404d7f24_600_566.jpeg","name":"图片7"
      },
      {
      "img":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1581004370914&di=1724f04a58ec9850f168ed5a1faac7d1&imgtype=0&src=http%3A%2F%2Fthumb11.jfcdns.com%2Fthumb%2F2018-05%2Fbce5b03e404d7f24_600_566.jpeg","name":"图片8"
      },
      {
      "img":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1581004370914&di=1724f04a58ec9850f168ed5a1faac7d1&imgtype=0&src=http%3A%2F%2Fthumb11.jfcdns.com%2Fthumb%2F2018-05%2Fbce5b03e404d7f24_600_566.jpeg","name":"图片9"
      },
      {
      "img":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1581004370914&di=1724f04a58ec9850f168ed5a1faac7d1&imgtype=0&src=http%3A%2F%2Fthumb11.jfcdns.com%2Fthumb%2F2018-05%2Fbce5b03e404d7f24_600_566.jpeg","name":"图片10"
      },
      {
      "img":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1581004370914&di=1724f04a58ec9850f168ed5a1faac7d1&imgtype=0&src=http%3A%2F%2Fthumb11.jfcdns.com%2Fthumb%2F2018-05%2Fbce5b03e404d7f24_600_566.jpeg","name":"图片11"
      },
      {
      "img":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1581004370914&di=1724f04a58ec9850f168ed5a1faac7d1&imgtype=0&src=http%3A%2F%2Fthumb11.jfcdns.com%2Fthumb%2F2018-05%2Fbce5b03e404d7f24_600_566.jpeg","name":"图片12"
      },
      {
      "img":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1581004370914&di=1724f04a58ec9850f168ed5a1faac7d1&imgtype=0&src=http%3A%2F%2Fthumb11.jfcdns.com%2Fthumb%2F2018-05%2Fbce5b03e404d7f24_600_566.jpeg","name":"图片13"
      },
      {
      "img":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1581004370914&di=1724f04a58ec9850f168ed5a1faac7d1&imgtype=0&src=http%3A%2F%2Fthumb11.jfcdns.com%2Fthumb%2F2018-05%2Fbce5b03e404d7f24_600_566.jpeg","name":"图片14"
      },
      {
      "img":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1581004370914&di=1724f04a58ec9850f168ed5a1faac7d1&imgtype=0&src=http%3A%2F%2Fthumb11.jfcdns.com%2Fthumb%2F2018-05%2Fbce5b03e404d7f24_600_566.jpeg","name":"图片15"
      }
      ]
    </div>
    <script type="text/html" id="J_imgTpl">
        <li class="img-item">
        <div class="img-wrap">
            <img src="q.png" alt="cc" data-src="{{img}}" class="img"  style="width: 100px;height:100px"/>
         </div>
         <div class="img-tt">
             <h1>{{name}}</h1>
         </div>
        </li>
    </script>
    <script src="js/utils.js"></script>
    <script src="js/index.js"></script>
</body>
</html>

;(function(doc){
    var oUl = doc.getElementsByClassName('J_imgList')[0],
        jdata = JSON.parse(doc.getElementById('J_data').innerHTML),
        jImpl = doc.getElementById('J_imgTpl').innerHTML,
        img = doc.getElementsByClassName('img');
    function init(){
        oUl.innerHTML=renderList(jdata);
        bindEvent();
        setTimeout(function(){
            window.scroll(0, 0);
        },150)
    }
    function bindEvent(){
        document.onscroll = window.onload = debounce(imgLazyLoad(img),2000,false)
        // addElemEvent(document,'scroll',throttle(imgLazyLoad(img),2000),false);
        // addElemEvent(window,'load',throttle(imgLazyLoad(img),2000),false);
    }
    function renderList(jdata){
        var list = "";
        jdata.myForEach(function(elem){
            list += jImpl.replace(/{{(.*?)}}/g,function(node, key){
                return{
                  img: elem.img
                }[key]
            })
        });
        return list;
    }

    init();

}(document));
 function imgLazyLoad(img){
        var imgLen = img.length,
            n = 0;//这样就不会每次滚动都去删除data
        return function(){
            var cHeight = browseSeeDist().height,//浏览器高度
                cScrol = browseScrollDist().top,//滚动距离
                imgItem;
            for(var i = n; i < imgLen; i++){
                imgItem = img[i];
                //当前图片是否小于高度+距离
                if(imgItem.offsetTop < cHeight+cScrol){

                    imgItem.src = imgItem.getAttribute('data-src');
                    imgItem.removeAttribute('data-src');
                     n++;
                }

            }
        }
    }

可乐雪碧薄荷糖

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ECMAScript扩展 -12 【图片的预加载与懒加载】

一.图片预加载(1).多张图片通过实例化Image对象调用onload方法来实现(onload之后)var oDiv = document.getElementsByClassName('div')[0], img = ['https://zza.jpg', 'https://zzb.jpg']; img.forEach(function(elem){ var oImg = new Image(); oImg.src = elem;
复制链接

扫一扫

专栏目录