学习笔记：首屏图片延迟加载（1）

最新推荐文章于 2023-12-26 15:30:59 发布

Paris one

最新推荐文章于 2023-12-26 15:30:59 发布

阅读量191

点赞数

本文链接：https://blog.csdn.net/jianchibuxie0/article/details/103137214

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>图片延迟加载和图片懒加载</title>
    <style type="text/css">
      *{
        margin:0;
        padding:0;
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        font-size:14px;    
      }
      .banner{
          margin:10px auto;
          width:350px;
          height:150px;
          border:1px solid green;
          background:url("img/default.gif")no-repeat center center #e1e1e1;/*就算没有图片也不能空着，
          给这个区域加上背景图片，告诉用户此处的图片正在加载中*/
      }
      .banner img{
          display:none;/*在开始的时候img的src属性没有地址，这样的话再IE浏览器中容器中
          会显示一张碎图，不美观，所以我们让其默认是隐藏的，当真实的图片加载完成后再显示*/
          width:100%;
          height:100%;
      }
    </style>
</head>
<body>
    <!--作用：保证页面打开的速度（3s之内如果首页打不开，被称为死亡页面）
    原理：
    1、对于首屏幕的内容中的图片：首先给对应的区域一张默认图片占着的位置
    （默认图需要非常的小，一般在5kb以内），当首屏内容都加载完成后（或者也
    可以给一个延迟的时间），我再开始加载真实的图片
    2、对于其他屏中的图片：也是给一张默认的图片占位置，当滚动条滚动到对应
    区域的时候，我们再开始加载真实的图片
    扩展：数据的异步加载，开始只把前两屏的数据加载绑定出来，后面的数据不进行处理，
    当页面滚动到对应区域的时候再从新请求数据然后绑定渲染数据

    网站性能优化：尽量减少向服务器请求的次数（减少HTTP请求）
    -->
    <div class="banner" id="banner">
        <img src="" trueImg="./1.jpg.jpg"/>  <!--不想图片显示：将src里面的设置为空(给img做延迟加载)
        trueImg是当前img标签的自定义属性，存储的是真实图片img的地址-->
    </div>
    <script type="text/javascript">
    var banner=document.getElementById("banner"),imgFir=banner.getElementsByTagName("img")[0];
    //先获取banner，在获取banner下面的img，即获取banner 的所有图片的第一张图片imgFir

    //设置定时器，等500ms之后在加载
    window.setTimeout(function(){
        //imgFir.src=imgFir.getAttribute("trueImg");//把自定义属性里面的真实图片地址赋值给src地址（真实图片地址加载完）
       // imgFir.style.display="block";
       //以上处理不完整：如果获取的真实图片地址是错误的，当赋值给imgsrc属性时，不仅控制台会报错，而且页面中会出现碎图或者叉子图，影响视觉效果
       
       
       //获取图片的地址，验证地址的有效性，有效才赋值，不是有效的不进行赋值处理
       //var oImg=document.createElement("img");//创建一个临时的img标签（太繁琐，改进如下）
       var oImg=new Image;//创建一个临时的img标签
       oImg.src=imgFir.getAttribute("trueImg");//把自定义属性里面的真实图片地址赋值给临时标签，即使错了，临时标签没在页面中显示
       oImg.onload=function(){ //当图片能够正常加载（如果此方法执行了，说明这个地址是真的）
        imgFir.src=this.src;
        imgFir.style.display="block";
        oImg=null;//释放内存，把临时标签清空
        //console.log("图片正在加载完成...");//异步原理（所有的事件绑定都是异步编程的），后出现

        //计算当前图片需要多长事件加载完成
        var nowTime=new Date;
        console.log(nowTime-time);
       };
      // console.log("图片正在加载中..."); 
      var time=new Date;
    },2000);
    </script>
</body>
</html>

Paris one

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学习笔记：首屏图片延迟加载（1）

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
复制链接

扫一扫