阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      JavaScript 单张静态图片延迟加载

      图片延迟加载:

      静态资源图片的延迟加载(一般是网站上固定的大图,为了不影响第一次加载页面的速度,我们需要把这张大图延迟加载)

      开始的时候,我们给当前大图所在的位置的div加一个默认的背景图(要求小,起到占位的作用)

      等过XX毫秒后,再进行加载;因为这个时候,别的资源都加载的差不多了;而且图片慢慢的显示出来,网页有动起来的感觉

      相关知识点

      1、用setTimeout循环创建定时器产生的累加的问题:在每一次执行方法的时候,第一步首先把之前创建的定时器清除掉;

      2、在设置定时器的时候,如果一个匿名函数里面又包含了一个小的函数执行,然而小函数执行要用到匿名函数的上级作用域的东西,这样匿名函数作用域不销毁,性能不好;

      代码

      <!DOCTYPE html>
      <html>
      <head lang="en">
          <meta charset="UTF-8">
          <title>静态图片的延迟加载</title>
          <style type="text/css">
              body, div, img {
                  margin: 0;
                  padding: 0;
              }
      
              img {
                  border: none;
              }
      
              html, body {
                  width: 100%;
              }
      
              #div1 {
                  width: 100%;
                  height: 290px;
                  background: url("http://broszhu.com/works//onmousemove/img/3.jpg") no-repeat;
                  background-size: 100% 100%;
                  background: none \9;
                  _background: none;
                  background-color: #37C7D4;
              }
      
              #div1 img {
                  width: 100%;
                  height: 290px;
                  opacity: 0;
                  filter: alpha(opacity=0);
              }
          </style>
      </head>
      <body>
      <div id="div1"></div>
      <script>
          //图片延迟加载:
          //1、静态资源图片的延迟加载(一般是网站上固定的大图,为了不影响第一次加载页面的速度,我们需要把这张大图延迟加载)
          //开始的时候,我们给当前大图所在的位置的div加一个默认的背景图(要求小,起到占位的作用)
          var oDiv = document.getElementById("div1");
          window.setTimeout(loadImg, 1000);
          function loadImg() {
              var oImg = new Image;
              oImg.src = "http://broszhu.com/works/imgLoad/img/5.jpg";
              oImg.alt = "";
              oImg.onload = function () {
                  oDiv.appendChild(oImg);
                  move(this);
              }
          }
          function move(ele) {
              var speed = 0;
              _move();
              function _move() {
                  window.clearTimeout(ele.timer);
                  speed += 0.02;
                  setCss(ele, "opacity", speed);
                  if (speed >= 1) {
                      setCss(ele, "opacity", 1);
                      return;
                  }
                  ele.timer = window.setTimeout(_move, 10);
              }
          };
          function setCss(curEle,attr,value) {//设置CSS属性值;
              switch (attr) {
                  case "opacity":
                      curEle["style"][attr] = value;
                      curEle["style"]["filter"] = "alpha(opacity=" + (value * 100) + ")";
                      break;
                  case "zIndex":
                      curEle["style"][attr] = value;
                      break;
                  default:
                      curEle["style"][attr] = !isNaN(value) ? value += "px" : value;
              }
          }
          //1、用setTimeout循环创建定时器产生的累加的问题:在每一次执行方法的时候,第一步首先把之前创建的定时器清除掉
          //2、在设置定时器的时候,如果一个匿名函数里面又包含了一个小的函数执行,然而小函数执行要用到匿名函数的上级作用域的东西,这样匿名函数作用域不销毁,性能不好
      </script>
      </body>
      </html>
      
      目录
      本文目录
      目录