图像的延时加载lazyload.js
来源:互联网 发布:淘宝电子洋垃圾 编辑:程序博客网 时间:2024/04/28 22:04
Using Lazy Load on long web pages will make the page load faster. In some cases it can also help to reduce server load.
图片延时加载能让网站的加载速度变快,有时他还能减缓服务器的压力。
For those in hurry there are several demo pages: basic options, with fadein effect, noscript fallback, page with gazillion images and load images using timeout.
上面的demo(每个链接)方便使用者快速上手。
Heads up! When checking the demos clear browser cache between each request. You can check what is actually loaded with developers console (Chrome, Safari and IE) or FireBug (Firefox).
每次请求时注意清缓存!
Lazy Load depends on jQuery. Include them both in end of your HTML code:该插件依赖于jQuery
<script src="jquery.js"></script><script src="jquery.lazyload.js"></script>
You must alter your image tags. Address of the image must be put into
data-original
attribute. Give lazy loaded images a specific class. This way you can easily control which images plugin is binded to.使用时需要修改img标签,将图片的路径写进图片的data-original属性里面去,并给这些需要延时加载的图片一个特殊的类名,方便js绑定。
<img class="lazy" data-original="img/example.jpg" width="640" height="480">$(function() { $("img.lazy").lazyload();});PRO TIP! You must set image dimensions either as
width
and height
attributes or in CSS. Otherwise plugin might not work properly.图片最好设置宽和高以免插件运行不正常
Setting Threshold
By default images are loaded when they appear on the screen. If you want images to load earlier use threshold
parameter. Setting threshold to 200 causes image to load 200 pixels before it appears on viewport.
$("img.lazy").lazyload({ threshold : 200});
Event to Trigger Loading
You can use jQuery event such as click
or mouseover
. You can also use custom events such as sporty
or foobar
. Default is to wait until user scrolls down and image appears on the viewport. To load images only when user clicks them you could do:
$("img.lazy").lazyload({ event : "click"});
PRO TIP! You can use this for tricks like delayed loading of images. Following code waits five seconds after rest of page has finished loading before it loads images. 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);});
Using Effects
By default plugin waits for image to fully load and calls show()
. You can use any effect you want. Following code uses fadeIn
effect. Check how it works at effect demo page.可以使用一些特效
$("img.lazy").lazyload({ effect : "fadeIn"});
Fallback for Non JavaScript Browsers
Practically everyone has JavaScript enabled. However if you still want to support non JavaScript users you can include the real image tag inside <noscript></noscript>
block.
<img class="lazy" data-original="img/example.jpg" width="640" heigh="480"><noscript> <img src="img/example.jpg" width="640" heigh="480"></noscript>
To prevent both placeholder and the real image showing at the same time hide the placeholder with css.
.lazy { display: none;}
For JavaScript enabled browser you must enable displaying the placeholders when documents loads. This can be done at the same time when initializing the plugin.
$("img.lazy").show().lazyload();
Images Inside Container
You can also use plugin for images inside scrolling container, such as div with scrollbar. Just pass the container as jQuery object. There is a demo for horizonta and vertical container.
某个容器内的图片延时加载也可以实现#container { height: 600px; overflow: scroll;}$("img.lazy").lazyload({ container: $("#container")});
When Images Are Not Sequential
After scrolling page plugin loops though unloaded images. Loop checks if image has become visible. By default loop is stopped when first image outside viewport is found. This is based on following assumption. Order of images on page is same as order of images in HTML code. With some layouts assumption this might be wrong. You can control loading behaviour with failure_limit
setting.
$("img.lazy").lazyload({ failure_limit : 10});Setting
failure_limit
to 10 causes plugin to stop searching for images to load after finding 10 images below the fold. If you have a funky layout set this number to something high. Worst case being the actual number of images.Dealing With Invisible Images
There are cases when you have images which are in viewport but not :visible
. To improve performance you can ignore .not(":visible")
images.
$("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.Install
You can install with bower or npm.
$ bower install jquery.lazyload$ npm install jquery-lazyload下载地址:
原版的:
缩减版的:
- 图像的延时加载lazyload.js
- jquery lazyload 图片延时加载
- ajax+lazyload.js,如何只让新加载出来的元素lazyload
- lazyload.js延迟加载
- jQuery lazyload插件实现图片延时加载
- 解决angular js图片延时加载me-lazyload在淘宝SUI Mobile手机模板兼容
- jquery.lazyload.js 延迟加载
- 懒加载jquery.lazyload.js
- jquery.lazyload.js 懒加载
- jquery.lazyload.js 懒加载
- lazyload.js实现懒加载
- jquery的lazyload.js实现图片的懒加载
- jquery的lazyload.js实现图片的懒加载
- 缓冲加载图片的 jQuery 插件 lazyload.js 使用方法详解
- 缓冲加载图片的 jQuery 插件 lazyload.js 使用方法详解
- 缓冲加载图片的jQuery插件lazyload.js 使用方法详解
- 缓冲加载图片的 jQuery 插件 lazyload.js 使用方法详解
- 缓冲加载图片的 jQuery 插件 lazyload.js 使用方法详解
- 学学 markdown, 哈哈
- 常用模块--time,random,hashlib,os
- 汇编项目实例
- ffmpeg filter开发
- POI导入Excel并处理数据
- 图像的延时加载lazyload.js
- CSS布局相关操作
- C++学习(50)
- GO学习日记(二)Visual Studio Code GO插件配置
- 利用虚拟机Ubuntu的Samba服务,实现Windows映射网络盘到Ubuntu
- eclipse中svn代码乱码
- 网站已备案欢迎访问个人独立博客网站:www.stevin3t3y.site
- Android 计时器 分:秒:毫秒 http://download.csdn.net/detail/tangjili5620/9876529
- RecyclerView SDK25的各种兼容问题