延迟加载 Lazy Load

翻译 2018年04月17日 10:28:21


延迟加载延迟加载长网页中的图像。在用户滚动到视口之前,视口外的图像将不会被加载。这与图像预加载相反。

这是原始Lazy Load插件的现代香草JavaScript版本它使用Intersection Observer API来观察图像何时进入浏览器视口。原始代码受Matt Mlinac的YUI ImageLoader实用程序的启发。新版本大量来自Dean Hume 博客文章

对于那些匆忙有几个演示页面:基本选项包含许多图像的页面使用超时加载图像

基本用法

默认情况下,Lazy Load假定可以在data-src属性中找到原始高分辨率图像的URL 您还可以在src属性中包含可选的低分辨率占位符

<img class="lazyload" data-src="img/example.jpg" width="765" height="574">
<img class="lazyload" src="img/example-thumb.jpg" data-src="img/example.jpg" width="765" height="574">

随着HTML的到位,您可以使用工厂方法初始化插件。如果你没有传递任何设置或图像元素,它将延迟加载所有图像的类lazyload

lazyload();

如果你喜欢,你可以明确地将图像元素传递给工厂。例如,如果您使用不同的类名称,请使用此选项。

let images = document.querySelectorAll(".branwdo");
lazyload(images);

如果你喜欢,你也可以使用普通的旧构造函数。

let images = document.querySelectorAll(".branwdo");
new LazyLoad(images);

额外的API

要使用额外的API,您需要将插件实例分配给一个变量。

let lazy = lazyload();

强制加载所有图像使用loadimages()

lazy->loadImages();

销毁插件并停止使用懒惰destroy()

lazy->destroy();

请注意,destroy()不会加载视口图像。如果你还想加载图片使用loadAndDestroy()

lazy->loadAndDestroy();

使用jQuery包装器无法使用其他API。

jQuery包装

如果您使用jQuery,那么您可以使用熟悉的旧语法的包装器。请注意,提供data-original默认情况下使用BC 这应该是对插件以前版本的替代。

<img class="lazyload" data-original="img/example.jpg" width="765" height="574">
<img class="lazyload" src="img/example-thumb.jpg" data-original="img/example.jpg" width="765" height="574">
$("img.lazyload").lazyload();

食谱

模糊图像

低分辨率占位符即。“模糊”技术。您可以在此博客条目中看到此操作向下滚动以查看模糊图像。

<img class="lazyload"
     src="thumbnail.jpg"
     data-src="original.jpg"
     width="1024" height="768" />
<div class="lazyload"
     style="background-image: url('thumbnail.jpg')"
     data-src="original.jpg" />

响应式图像

Lazyloaded Responsive图像通过支持data-srcset如果浏览器不支持srcset并且没有填充图片,data-src则会显示图片。

<img class="lazyload"
     src="thumbnail.jpg"
     data-src="large.jpg"
     data-srcset="small.jpg 480w, medium.jpg 640w, large.jpg 1024w"
     width="1024" height="768" />
<img class="lazyload"
     src="thumbnail.jpg"
     data-src="normal.jpg"
     data-srcset="normal.jpg 1x, retina.jpg 2x"
     width="1024" height="768" />

内嵌的占位符图像

为了减少请求数量,您可以使用数据uri图像作为占位符。

<img src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs="
     data-src="original.jpg"
     width="1024" height="768" />

安装

这仍在进行中。目前还没有发布。同时你可以使用rawgit。

$ wget https://rawgit.com/tuupola/jquery_lazyload/2.x/lazyload.js

万不得已不要使用ORM延迟加载(Lazy Loading)

       延迟加载(Lazy Loading)是啥玩意儿?估计地球人都知道,它的意义在于只在需要的时候才去加载必要的数据,这样可以避免即时加载所带来的不必要的系统开销(教科书是这么说的)。另外,教...
  • lovingprince
  • lovingprince
  • 2009-12-28 11:30:00
  • 4970

ImagesLazyload图片延迟加载效果

转自:http://www.cnblogs.com/cloudgamer/archive/2010/03/03/ImagesLazyLoad.html 之前在做一个图片浏览效果时,要看后面的小图...
  • lizhiqiang5846
  • lizhiqiang5846
  • 2015-12-26 18:54:43
  • 949

延迟加载(Lazyload)三种实现方式

定义:延迟加载也称为惰性加载,即在长网页中延迟加载图像。用户滚动到它们之前,视口外的图像不会加载。这与图像预加载相反,在长网页上使用延迟加载将使网页加载更快。在某些情况下,它还可以帮助减少服务器负载。...
  • sinat_17775997
  • sinat_17775997
  • 2017-03-02 23:00:34
  • 1842

spring jpa 延迟加载

最关键一句 prop key="hibernate.enable_lazy_load_no_trans">trueprop>但是,另一个没有测试过,就是网页对 对象的延迟加载,下面第二种配置以后可...
  • petercnmei
  • petercnmei
  • 2017-02-01 16:11:09
  • 1214

lazy 延迟加载策略

Hibernate 的延迟加载(lazy load)是一个被广泛使用的技术。这种延迟加载保证了应用只有在需要时才去数据库中抓取相应的记录。通过延迟加载技术可以避免过多、过早地加载数据表里的数据,从而降...
  • l_feilong
  • l_feilong
  • 2016-03-06 12:01:51
  • 231

延迟加载ycm以加快vim的启动速度

延迟加载youcompleteme以加快vim的启动速度通过vim –startuptime可以看到ycm启动加载时间非常长。但是有时我们只是想打开文件进行查看,不需要修改操作,这时ycm并起不了作用...
  • tenghui0425
  • tenghui0425
  • 2017-04-17 01:02:44
  • 418

hibernate延迟加载机制——get和load原理

在hibernate中我们知道如果要从数据库中得到一个对象,通常有两种方式,一种是通过session.get()方法,另一种就是通过session.load()方法,然后其实这两种方法在获得一个实体对...
  • Daybreak1209
  • Daybreak1209
  • 2016-07-10 20:57:56
  • 1137

lazy loading(延迟加载)

延迟加载机制是为了避免一些无谓的性能开销而提出来的,所谓延迟加载就是当在真正需要数据的时候,才真正执行数据加载操作。可以简单理解为,只有在使用的时候,才会发出sql语句进行查询。 ...
  • sun11462
  • sun11462
  • 2015-02-01 09:40:09
  • 2365

mybatis中延迟加载Lazy策略

延迟加载: lazy策略原理:只有在使用查询sql返回的数据是才真正发出sql语句到数据库,否则不发出(主要用在多表的联合查询) 1.一对一延迟加载:...
  • m0_37905429
  • m0_37905429
  • 2017-08-10 22:21:43
  • 442
收藏助手
不良信息举报
您举报文章:延迟加载 Lazy Load
举报原因:
原因补充:

(最多只允许输入30个字)