一个jQuery或zepto的图片延迟加载插件 https://github.com/jieyou/lazyload
|
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 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
var options = { // 默认情况下，图像会在出现在屏幕上时被加载。如果你想的图像更早地加载，可以使用threshold参数。设置threshold为200，将导致图像在它离视窗边缘还有200px时开始加载。 threshold : 0, // default: 0. 另一个例子: 200 // 在页面滚动后，该插件将所有未加载的图像循环一遍。并在循环检查图像是否在视窗中。默认情况下，发现第一个位于视窗外的图片时，循环停止。这是基于以下的假设：页面上图像的顺序与它们在HTML代码中的顺序是一致的。然而对于某些布局，这可能是错误的。你可以通过设置failure_limit参数来控制循环终止的行为（failure_limit参数的数值为最多允许多少张图片被检查出位于视窗外后停止检查循环中剩余未检查的图片），当你将它设置为一个比较大的数值，显著多余总的图片数量（如9999）时，则可以认为会检测到每一张图片。 failure_limit : 0, // default: 0. 另一个例子: 10 // 指定触发什么事件时，开始加载真实的图片。你可以使用jQuery中已有的事件，如click或mouseover。你也可以使用自定义的事件如sporty或foobar。当事件是`scroll`或类似事件类型时，还需要检查图像是否已出现在视窗中。 event : 'scroll', // default: 'scroll'. 另一个例子: 'click' // 默认情况下插件在等待图片完全加载后调用show()。你可以使用想要的任何效果。下面的代码使用了fadeIn效果。你可以在demo页面中查看该效果。 effect : 'show', // default: 'show'. 另一个例子: 'fadein' // 上述效果（`effect`）函数的参数数组。举两个例子，如果`effect`参数设置为`show`且`effect_params`参数设置为[400]，将会调用`$element.show(400)`，即在400ms后显示图片；如果`effect`参数设置为`fadein`且`effect_params`参数设置为[400,completeFunction]，将会调用`fadein(400,completeFunction)`，即在400ms内渐入显示图片，并在渐入动画完成时调用`completeFunction`。 effect_params : null, // default: undefined. 另一个例子: [400]. // 你可以将改插件运用在某个容器内，如一个有滚动条的div。只需要传递容器的jQuery对象。我们有在纵向和横向滚动的容器中使用插件的两个demo。 container : window, // default: 'show'. 另一个例子: $('#container') // 默认情况下，图片的真实url被设置在`data-original`属性内，你可以通过修改下面这个值来改变这个属性名（如`url`，这样插件将在`data-url`属性中查找图片的真实地址）注意下面这个值是不用包含`data-`头的。 data_attribute : 'original', // default: 'original'. 另一个例子: 'url' // 当你将图片懒加载技术与`srcset`一起使用时，你不能将`srcset`的值直接写在`srcset`内，否则会导致图片立即加载。默认情况下，你应该写在属性`data-original-srcset`内，这样lazyload插件会帮你在合适的时候将它的赋值到`srcset`上。你可以通过修改下面这个值来改变这个属性名。注意下面这个值是不用包含`data-`头的。 data_srcset_attribute : 'original-srcset', // default: 'original-srcset'. 另一个例子: 'o-srcset' // 当图片在视窗中出现时回调。`this`指向出现的图片元素的节点，参数第一项为当前元素的jQuery|Zepto对象，第二项为尚未出现的图片的数量，第三项为配置参数对象。 appear : function(){}, // default: `the emptyFunc`. 另一个例子: function($elements, elements_left, options){} // 当图片加载完毕时回调。`this`指向出现的图片元素的节点，参数第一项为当前元素的jQuery|Zepto对象，第二项为尚未出现的图片的数量，第三项为配置参数对象。 load : function(){}, // default: `the emptyFunc`. 另一个例子: function($elements, elements_left, options){} // 在大多数情况下，页面只能纵向滚动。此时，只需要检查图片的竖直位置是否出现在视图中即可。如果这样做能提高性能。你可以在只能纵向滚动的页面中将`vertical_only`参数设置为true vertical_only : false, // default: false. 另一个例子: true // 默认情况下，lazyload会在`window`的`scroll`、`resize`事件被触发时，检查图片是否已经出现在视窗中，但用户一次缩放屏幕通常可能连续触发多次resize事件；除了iOS以外的设备，用户一次滚屏也可能触发多次scroll事件，这造成了性能上的浪费。你可以通过这个参数设置两次检查之间最少的间隔时间，用来提高性能。当设置为0时，则每次触发`scroll`、`resize`事件时都会检测 check_appear_throttle_time : 300, // default: 300. 另一个例子: 0 // 重写图片的原始url。回调函数中，`this`指向出现的图片元素的节点，参数第一项为当前元素的jQuery|Zepto对象，第二项为当前元素的图片的原始url url_rewriter_fn : function(){}, // default: `the emptyFunc`. 另一个例子: function($element,originalSrcInAttr){} // 不使用假图片预加载（详见上面“高级”中的“不使用假图片预加载”） no_fake_img_loader : false, // default: false. 另一个例子: true // 如果一个img元素没有指定src属性，我们使用这个placeholder，在真正的图片被加载之前，此img会呈现这个占位图。 placeholder_data_img : 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC', // IE6/7 的 placeholder。这是我当时在百度时的cdn地址，建议改为你服务器上的任一张灰色或白色的1*1的小图 placeholder_real_img : 'http://webmap3.map.bdimg.com/yyfm/lazyload/0.0.1/img/placeholder.png' } $("img.lazy").lazyload(options); |
