zoukankan      html  css  js  c++  java
  • 通过js实现简单的图片延时加载

    1.将要延迟加载的图片src属性全部改成thissrc

    比如<img src="./top_img.jpg" />改成<img thissrc="./top_img.jpg" />

      <div class="topic-list">

    <img thissrc="1.png" width="180" height="180" />

    <img thissrc="2.png" width="180" height="180" />

    <img thissrc="3.png" width="180" height="180" />

      </div>

    2.在页面的最底部加入下面的script代码,比如这样。

    <script type="text/javascript">

    setTimeout("tosrc()", 1000); //延时加载

    function tosrc() {
       imgs = $('.topic-list').find('img');
          imgsnum = imgs.length;
          for (imgi = 0; imgi < imgsnum; imgi++) {
              if ((typeof (imgs[imgi].src) == 'undefined' || imgs[imgi].src == "") && imgs[imgi].getAttribute('thissrc') != null)
                   imgs[imgi].src = imgs[imgi].getAttribute('thissrc');
                }
            }

    </script>

  • 相关阅读:
    编程总结2
    编程总结3
    《秋季学期学习总结》
    《人生路上对我影响最大的三位老师》
    第八周编程总结
    第七周编程总结
    第六周编程总结
    第五周作业
    第四周编程总结
    第三周编程总结
  • 原文地址:https://www.cnblogs.com/YTzZ/p/4863390.html
Copyright © 2011-2022 走看看