懒加载-预加载精简解读

最新推荐文章于 2023-07-15 14:35:55 发布

Programmer boy

最新推荐文章于 2023-07-15 14:35:55 发布

阅读量399

点赞数

分类专栏：性能优化文章标签：懒加载预加载性能优化

本文链接：https://blog.csdn.net/m0_37631322/article/details/80445682

版权

性能优化专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1.在云相册页面存在多张图片，一次性加载会出现页面中图片短暂白屏的问题，为了解决这个问题，使用懒加载来处理；

核心思路：使用html5中的 data-image 属性将图片的链接先绑定在元素身上，当检测到当前页的可视区域即将滚动到该元素时，将data-image注入到background-image上，在屏幕的scroll和resize事件上将该函数绑定；

核心代码如下:

//按照需求加载
var fn = function(){
	 $("#imagesBoxId  .image_div_css").each(function(){  //遍历所有图片
	       var othis = $(this),//当前图片对象	
	       var  top = othis.offset().top - $(window).scrollTop(); 
                   //计算图片top-滚动条top
          if (top > $(window).height()) {   //如果两者之差小于屏幕高度
	               return;   //不管
	            } else {                
                        othis.css('background-image', othis.attr('data-image'));
                        //可见的时候把占位值替换 并删除占位属性
                       };	            
	           });
	      };
 fn();
$(window).scroll(fn).resize(fn);    //绑定事件

2.除了懒加载，还有预加载的思想，比如在做手机端的那种向下滑动的页面，当检测到滑动到第一屏的底端时，再去提前加载第二屏的内容，这里可以理解为是预加载；比如在hover某些图片的时候，如果没有提前加载好，会出现闪烁的问题；这些情况都需要使用预加载；

//存放图片路径的数组
    var imgSrcArr = [
        'imgsrc1',
        'imgsrc2',
        'imgsrc3',
        'imgsrc4'
    ];
    var imgWrap = [];
    function preloadImg(arr) {
        for(var i =0; i< arr.length ;i++) {
            imgWrap[i] = new Image();
            imgWrap[i].src = arr[i];
        }
    }
    preloadImg(imgSrcArr);

3.基于上述加载的思想，改造一种分阶段自动加载的方法，这里存在大量的图片需要加载，一次性加载的话体验非常的不好；如果按照光标下载滑动的距离来加载的话，当用户向下滑动的速度非常快时，加载速度完全跟不上光标（电视端）的移动速度，就会出现卡死的问题；为了解决这个问题，我们每次加在6张图片，轮询检测第6N张图片的加载是否完成，如果加载完成，开始下一组的加载；知道全部图片加载完毕；

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>懒加载的实现</title>
    <style>
        img{
            width:50px;
            height:50px;
            margin:1px;
        }
    </style>
</head>
<body id="div2">

<script>
   //一个数组中有36张图片，怎样先加载6张，等到这6张加载完毕后，在自动去加载后边六张，自己控制加载，加载完毕后，再
   // 自动去加载另外六张图片，二而不用等到scrollTop值到了之后再去加载相应的值。使用队列的思想；
   //还有不是使用先建立很多的background-image，或者img的方法，在果果云相册中，是在jsp中的中循环插入了很多的div来实现的；
   // 这个思想完全可以放在首页改版的页面中查看效果
   //怎样判断图片加载完毕？通过监听img的onload事件是否已经完成，或者通过判断img对象（DOM）的complete属性是否为true；
     var imgSrcArr =[
         'https://cdn-d4-p1.vas.lutongnet.com/larko-epg-h5/resources/hd/com/home_bg.jpg',
          //实际测试在这里Ctrl+D，复制大量的图片，或者循环插入多张图片
     ];
     //这里存储好创建的img标签，后边遍历这里的img将其appendChild到body中即可；
     var imgWrap = [];
     /**
      * @date: 2018-06-01
      * @Desc: 创建img标签，给img标签加src属性和id值
     */
     function preloadImg(arr,callback){
        for(var i =0; i<arr.length ;i++){
            imgWrap[i] = new Image();
            imgWrap[i].src = arr[i];   //在这里直接生成img标签对象，后边直接插入就行
            imgWrap[i].id="img"+i;
            if(i===arr.length-1){
                  callback(0);
            }
        }
    }
  /**
   * @date: 2018-06-01
   * @Desc:通过轮询的方式，当上一组的img加载完毕后，自动去加载下一组的img,一组包括6个img标签；
  */
     function insertImg(sixthimg){
             for(var m=sixthimg;m<sixthimg+6;m++){
                 document.getElementById("div2").appendChild(imgWrap[m]);
             }
             //开启轮询函数，
             var img=document.getElementById("img"+(sixthimg+5));
             var timer = setInterval(function(){
                 if(img.complete) {
                     if(sixthimg>=200){
                         clearInterval(timer);
                         return;
                     }else{
                         clearInterval(timer);
                         insertImg(sixthimg+6);
                         console.log("又加载6个了"+sixthimg);
                     }
                 }
             },60);
        }
   //调用函数
   preloadImg(imgSrcArr,insertImg);
</script>
</body>
</html>

3.懒加载和预加载的区别？

一个是内容后置，一个是内容前置；

Programmer boy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
懒加载-预加载精简解读

1.在云相册页面存在多张图片，一次性加载会出现页面中图片短暂白屏的问题，为了解决这个问题，使用懒加载来处理；核心思路：使用html5中的 data-image 属性将图片的链接先绑定在元素身上，当检测到当前页的可视区域即将滚动到该元素时，将data-image注入到background-image上，在屏幕的scroll和resize事件上将该函数绑定；核心代码如下://按照需求加载var fn...
复制链接

扫一扫

专栏目录