原生JS图片懒加载特效代码插件

原生JS图片懒加载特效代码插件

一款js图片懒加载特效,滚动到图片位置再赋值src加载图片,简单实用!

使用方法
在页面引入相关CSS样式文件reset.css、index.css

1
2
<link rel="stylesheet" type="text/css" href="css/reset.css"/>
<link rel="stylesheet" type="text/css" href="css/index.css"/>

JS代码

1
<script src="js/index.js" type="text/javascript" charset="utf-8"></script>

HTML结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<div class="index">
<h3 style="align-content: center;font-size: 30px">向下滚动页面,查看加载效果</h3>
  <div class="index-img">
      <img data-src="img/500x300-1.png" src="" alt="" />
  </div>
  <div class="index-img">
      <img data-src="img/500x300-2.png" src="" alt="" />
  </div>
  <div class="index-img">
      <img data-src="img/500x300-3.png" src="" alt="" />
  </div>
  <div class="index-img">
      <img data-src="img/500x300-4.png" src="" alt="" />
  </div>
  <div class="index-img">
      <img data-src="img/500x300-5.png" src="" alt="" />
  </div>
  <div class="index-img">
      <img data-src="img/500x300-6.png" src="" alt="" />
  </div>
  <div class="index-img">
      <img data-src="img/500x300-7.png" src="" alt="" />
  </div>
  <div class="index-img">
      <img data-src="img/500x300-8.png" src="" alt="" />
  </div>
</div>

文件信息:

    0

    发表评论