当前位置:主页 > JavsScript库 > 其它 >

延迟加载图像和视频的JavaScript库 - lazyload.js
栏目分类:其它   发布日期:2021-09-22   浏览次数:

lazyload.js 是一个独立的 JavaScript 库,用于延迟加载图像、视频和 iframe,没有任何依赖项。

它支持srcset属性并从渐进式JPEG图像格式中发挥最大的优势。也支持 Retina (HiDPI) HiDPI 屏幕。

它还支持谷歌引入的原生延迟加载功能。

基本用法:

lazyload.js在文档末尾加载JavaScript 库。

<script src="path/to/lazyload.js"></script>

使用data-original属性而不是将图像插入到文档中src。

// 单个图像
<img data-src="1.jpg" alt="Alt 1" /> 
// 带有低质量占位符
<img src="thumb-1.jpg"
     data-src="1.jpg"
     alt="Alt 1"
/>
 
// 响应式图片
<img class="lazy"
     data-src="1.jpg"
     data-srcset="1_400.jpg 400w, 1_800.jpg 800w"
     data-sizes="100w"
     alt="Alt 1"
/>
 
// 带有图片元素
<picture>
  <source media="(min-width: 1200px)"
          data-srcset="1_1200.jpg 1x, 1_2400.jpg 2x"
  />
  <source media="(min-width: 800px)"
          data-srcset="1_800.jpg 1x, 1_1600.jpg 2x"
  />
  <img class="lazy"
       data-src="1.jpg"
       alt="Alt 1"
  />
</picture>
 
// 适用于 webp 格式
<picture>
  <source type="image/webp"
         data-srcset="1.webp 400w, 1.webp 800w"
         data-sizes="100w"
  />
  <img class="lazy"
       data-src="1.jpg"
       data-srcset="1_400.jpg 400w, 1_800.jpg 800w"
       data-sizes="100w"
  />
</picture>

它还支持 HTML5 视频。

<video class="lazy" controls width="620"
  data-src="lazy.mp4" data-poster="lazy.jpg">
  <source type="video/mp4" data-src="lazy.mp4">
  <source type="video/ogg" data-src="lazy.ogg">
  <source type="video/avi" data-src="lazy.avi">
</video>

和背景图片:

<a
  href="#"
  class="lazy"
  data-bg-multi="url('1.jpg')"
  data-bg-multi-hidpi="url('full.jpg')"
></a>

和 iframe。

<iframe class="lazy" data-src="lazyFrame.html"> </iframe>

使用一个 JS 调用在您的图像上初始化延迟加载功能。

new LazyLoad({/*options*/});

具有默认值的可用选项。

// 图片选择器
elements_selector: ".lazy", 
 
// 父容器
container: window, 
 
// 离开视口的距离
threshold: 300,
 
// 不同的阈
thresholds: null,
 
// data-src 
data_src: "src", 
 
// data-srcset 
data_srcset: "srcset", 
 
// 日期大小
data_sizes: "sizes", 
 
// 对于背景图片
data_bg: "bg", 
 
// 对于 hidpi 图片
data_bg_hidpi: "bg-hidpi", 
 
// 对于多个bg images 
data_bg_multi: "bg-multi", 
data_bg_multi_hidpi: "bg-multi-hidpi", 
 
// 海报图片
data_poster: "poster",
 
// 默认类
class_applied: "applied", 
class_loading: "loading", 
class_loaded: "loaded", 
class_error: "error", 
class_entered: "entered", 
class_exited: "exited", 
 
// 是否自动取消观察已经显示的元素
unobserve_completed : true, 
 
// 执行一次惰性函数
unobserve_entered: true, 
 
// true = 在加载时取消退出视口的图像的下载,最终恢复原始属性
cancel_on_exit: true, 
 
// 使用原生加载属性
use_native: false

回调函数。

new LazyLoad({
    callback_enter: function(DOM, IntersectionObserverEntry, instance){
      // do something
    },
    callback_exit: function(DOM, IntersectionObserverEntry, instance){
      // do something
    },
    callback_applied: function(DOM, instance){
      // do something
    },
    callback_loading: function(DOM, instance){
      // do something
    },
    callback_loaded: function(DOM, instance){
      // do something
    },
    callback_error: function(DOM, instance){
      // do something
    },
    callback_finish: function(instance){
      // do something
    },
    callback_cancel: function(instance){
      // do something
    }
});

API 方法和属性

// 当前正在从网络下载的元素数量(仅限于由 LazyLoad 实例管理的元素)。 
instance.loadingCount
 
// 尚未延迟加载的元素数量(仅限于由 LazyLoad 实例管理的元素)
instance.toLoadCount
 
// 更新延迟加载
instance.update();
 
// 强制加载任何元素
instance.load(element, force);
 
//加载所有图片
instance.loadAll();
 
// 销毁 LazyLoad
instance.destroy();
 
// 重置给定元素的内部状态。
LazyLoad.resetStatus();
 
// 静态方法
LazyLoad.load(element, settings);

获取当前从网络下载的图像数量。

instance.loadingCount

获取要下载的图像数量。

instance.toLoadCount



官方网站:https://github.com/verlok/vanilla-lazyload

相关热词: lazyload.js延迟加载

声源:本站内容均来自互联网,仅供交流学习之用,请勿作商业用途,所有资源版权归原作者所有。如果有侵犯到您的权益,请联系本站删除,谢谢合作!
jQuery库 JavsScript库 Html5库 CSS3库