Skip to content

LeeJim/ilazy

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

7 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

ilazy

ilazy是一个图片懒加载的工具,当图片出现在可视区域时才加载该图片。

安装

使用npm下载:

$ npm install ilazy

下载后直接引用script

<script src="../somePath/ilazy.js"></script>

使用前

应该为每个图片设置好大小,以实现占位的功能。

若需要按比例设置,可以使用padding-top来相对于元素的宽度来设置。

用法

<body>
  <!-- 使用img标签 -->
  <img src="loading.gif" alt="avatar" data-ilazy="images/avatar.png">

  <!-- 或者使用background-image -->
  <div class="avatar" data-ilazy-background="images/avatar.png"></div>

  <script src="dist/ilazy.js"></script>
  <script>
    ilazy.init({
      offset: 30,
      callback: function(elem) {
        console.log(elem)
      }
    })
  </script>

</body>

可选参数

offset

距离可视区域的偏移量。

container

滚动的容器,默认是window,即全局滚动。

希望传入的是,ID选择器或者Class选择器,例如:#container 或者 .container

callback

加载成功后的回调函数,返回了当前加载的元素。

About

图片懒加载的工具,当图片出现在可视区域时才加载该图片。

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published