摘要：今天开始带型带秀专题。专题第二节会深入到源码。在可视图片加载后，浏览器将处于就绪状态。只需要将该容器元素作为对象传递。默认地，循环会在找到第一个视口外的图像时停止。但是某些页面的布局不符合该假设。最差的情况是该值为实际图片的数量。
今天开始带型带秀专题 -- Lazy Load。先从使用比较广泛的 jQuery Lazy Load 插件开始，逐步深入。该插件已经开发到了第二版，有兴趣的同学可以去看一看。专题第二节会深入到源码。
Lazy Load Plugin for jQueryGithub 地址
Lazy Load用于延迟加载图片。它会延迟加载视口外的图片，直到用户滚动页面使其出现。与图片预加载正好相反。
在包含许多大图片的长页面上使用Lazy Load可使页面加载速度更快。在可视图片加载后，浏览器将处于就绪状态。某些情况下也可帮助服务器减少负载。
Lazy Load启发于 Matt Mlinac 的 YUI ImageLoader。
这里有几个demo可以让你快速体验：basic options, with fadein effect, noscript fallback, page with gazillion images and load images using timeout.
➻ 用法注意！查看新的demo时清除缓存。你可以使用开发者工具（Chrome，Safari IE）或Firebug（Firefox）查看页面实际加载的内容。
Lazy Load依赖于jQuery，在HTML中将其引入。
引入脚本后，你还需要改变img元素的的HTML代码。添加data-original属性，其值为所要加载图片的URL。除此之外，推荐为使用Lazy Load的图片元素添加特定的class。这样你可以轻松的控制插件绑定到哪些图片。
例如：
然后在脚本中添加：
$(function () {
$("img.lazy").lazyload();
});
这将会使所有拥有lazy类名的图片延迟加载。
➻ 设置阀值注意！你必须通过width和height属性或者在CSS中为图片设置尺寸。否则插件不能正常工作。
默认情况下，图片出现在屏幕中时才被加载。如果你想提前加载图片，可以使用threshold参数。如下面的代码，将阀值设置为 200 时，图片会提前200像素被加载。
$("img.lazy").lazyload({
threshold: 200
});
➻ 自定义触发事件
你可以使用jQuery事件，如click或mouseover；也可以使用自定义事件，如sporty或foobar。默认的事件是用户滚动且图像出现在视口中。如果想让用户点击时图片才会显示，你可以这样做：
$("img.lazy").lazyload({
event: "click"
});
提示！ 你可以使用下面的技巧延迟加载图像。下面的代码会在页面加载完毕后等待五秒加载图像。See it working at delayed loading demo.
$(function() {
$("img.lazy").lazyload({
event : "sporty"
});
});
$(window).bind("load", function() {
var timeout = setTimeout(function() {
$("img.lazy").trigger("sporty")
}, 5000);
});
➻ 使用效果
默认地，插件会在图片完全加载后调用show()方法。当然你也可以用你喜欢的效果。如下面的代码使用了fadeIn效果。Check how it works at effect demo page.
$("img.lazy").lazyload({
effect : "fadeIn"
});
➻ 容器中的图像
你也可以为滚动容器中的图像应用此插件，例如带可滚动的div元素。只需要将该容器元素作为jQuery对象传递。这里有一个 水平 和 垂直 容器的例子。
#container {
height: 600px;
overflow: scroll;
}
$("img.lazy").lazyload({
container: $("#container")
});
➻ 当图片并非顺序
页面滚动后，插件会遍历未加载的图片。遍历会检查图片是否变的可见。默认地，循环会在找到第一个视口外的图像时停止。然而这是基于这样的假设：页面上图像的顺序与HTML代码中顺序相同。但是某些页面的布局不符合该假设。你可以设置failure_limit参数以控制加载行为。
$("img.lazy").lazyload({
failure_limit : 10
});
将该参数设置为10表示当在视口下方找到10个图像时才会停止遍历图像。如果你的布局更加特别，可以把该参数值调为更高。最差的情况是该值为实际图片的数量。
➻ 处理不可见图片有时会有这样的情况出现，图片在视口中在并不是:visible。为了提高性能，你可以选择忽略.not(":visible")的图像。
$("img.lazy").lazyload({
skip_invisible : true
});
➻ 安装HEADS UP! Webkit browsers will report images with without width and height as not .not(":visible"). This causes images to appear only when you scroll a bit. Either fix your image tags or keep skip_invisible as false. Use this feature only if you know what you are doing.
你可以使用bower或者npm安装：
$ bower install jquery.lazyload $ npm install jquery-lazyload
（完）
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/89444.html
摘要：而和则表示该容器中页面视图区的大小减去边框宽度。语法实际上，返回的值是一个双精度浮点值，指示文档当前从原点垂直滚动的像素数，其中正值表示向上滚动。除此之外，旧版本不支持这些属性，必须通过检查其他非标准属性来解决。 博客地址：https://guitong.github.io/blo... 上一节中，我们分析了 jQuery lazyload 源码，其中有这么一段： /* 在jQue...
摘要：参考文章使用及源码分析关于插件的基本介绍和使用请看上一篇文章。显示方法默认为，也可以设置为，源码中隐藏了一个配置属性，用于设置动画运行的时间。是否忽略隐藏的元素设置为时会忽略处理隐藏的元素。在触发事件时执行的回调。 参考文章：jQuery.lazyload使用及源码分析 关于 jQuery lazyload 插件的基本介绍和使用请看上一篇文章。（水水一章啦-。-） Overview 让...
摘要：初始化我们知道容器初始化后会对容器中非懒加载的，单例的以及非抽象的定义进行的初始化操作，所以我们分析源码的入口也就是在容器初始化的入口，分析容器初始化后在什么地方开始第一次的初始化。 前言 Spring IOC容器在初始化之后会对容器中非懒加载的，单例的以及非抽象的bean定义进行bean的初始化操作，同时会也涉及到Bean的后置处理器以及DI（依赖注入）等行为。对于Bean的初始化，...
摘要：粗读近来没什么特别要做的事，下班回来的空闲时间也比较多，所以抽空看看懒加载是怎么实现的，特别是看了下的库的实现。之先别关注，按他给注释说测试用。之是组件绑定事件时会触发的函数。 react-lazy-load粗读 近来没什么特别要做的事，下班回来的空闲时间也比较多，所以抽空看看懒加载是怎么实现的，特别是看了下 react-lazy-load 的库的实现。 懒加载 这里懒加载场景不是路由...
摘要：专题系列第十五篇，讲解惰性函数需求我们现在需要写一个函数，这个函数返回首次调用时的对象，注意是首次。解决四惰性函数不错，惰性函数就是解决每次都要进行判断的这个问题，解决原理很简单，重写函数。 JavaScript 专题系列第十五篇，讲解惰性函数 需求 我们现在需要写一个 foo 函数，这个函数返回首次调用时的 Date 对象，注意是首次。 解决一：普通方法 var t; functio...
阅读 3244·2021-11-22 14:44
阅读 1093·2021-11-16 11:53
阅读 1251·2021-11-12 10:36
阅读 683·2021-10-14 09:43
阅读 3658·2019-08-30 15:55
阅读 3381·2019-08-30 14:14
阅读 1720·2019-08-26 18:37
阅读 3391·2019-08-26 12:12
