jquery懒加载

下载

使用前请先下载对应的js文件

lazyload

懒加载: 只加载可视区域的内容

原理: 图片是由 src 引入的,因此先不写 src,而是用自定义属性存放资源路径 等到滚动条到图片的位置时才设置是如此属性,浏览器会引入资源

上代码:

img {
  height: 500px;
}
.box {
  height: 400px;
  overflow: scroll;
}

<div class="box">
  <img class="lazy" data-original="./img/1.jpg" alt="" />
  <img class="lazy" data-original="./img/2.jpg" alt="" />
  <img class="lazy" data-original="./img/3.jpg" alt="" />
  <img class="lazy" data-original="./img/4.jpg" alt="" />
  <img class="lazy" data-original="./img/5.jpg" alt="" />
</div>
<!-- 需要引入jq和懒加载的js文件 -->
<script src="./js/jquery-2.1.0.js"></script>
<script src="./js/jquery.lazyload.js"></script>
<script>
  $(".lazy").lazyload({
    //提前量
    threshold: 100,
    //触发事件
    event: "scroll",
    effect: "fadeIn",
    effectspeed: 2500,
    container: document.querySelector(".box")
    //占位符 loading
  });
</script>