jQuery图片延迟加载插件:jquery.lazyload
-----------------------------------------------------------------------------------------------
class='lazy' 载入样式,data-original指向图片地址
底部引入jQuery和jQuery.lazyload.js
<img class="lazy" data-original="img/bmw_m1_hood.jpg" width="765" height="574" alt="BMW M1 Hood">
<img class="lazy" data-original="img/bmw_m1_side.jpg" width="765" height="574" alt="BMW M1 Side">
<img class="lazy" data-original="img/viper_1.jpg" width="765" height="574" alt="Viper 1">
<img class="lazy" data-original="img/viper_corner.jpg" width="765" height="574" alt="Viper Corner">
<img class="lazy" data-original="img/bmw_m3_gt.jpg" width="765" height="574" alt="BMW M3 GT">
<img class="lazy" data-original="img/corvette_pitstop.jpg" width="765" height="574" alt="Corvette Pitstop"> <script src="jquery-1.11.0.min.js"></script>
<script src="jquery.lazyload.js?v=1.9.1"></script> <script type="text/javascript" charset="utf-8">
$(function() {
$("img.lazy").lazyload({effect: "fadeIn"});
});
</script>
底部调用lazyload()方法进行初始化,设置显示方法,当然还可以设置更多参数。
-------------------------------------------------------------------------------------------------
LazyLoad官方下载地址:http://www.appelsiini.net/projects/lazyload
jQuery插件库网站推荐:http://www.jq22.com
jQuery图片延迟加载插件:jquery.lazyload的更多相关文章
- jQuery图片延迟加载插件jQuery.lazyload
插件描述:jQuery图片延迟加载插件jQuery.lazyload,使用延迟加载在可提高网页下载速度.在某些情况下,它也能帮助减轻服务器负载. 使用方法 引用jquery和jquery.lazy ...
- jQuery图片延迟加载插件jQuery.lazyload使用方法(转)
使用方法 1.引用jquery和jquery.lazyload.js到你的页面 <script src="jquery-1.11.0.min.js"></scri ...
- jQuery图片延迟加载插件jquery.lazyload.js
在实际的项目开发中,我们通常会遇见这样的场景:一个页面有很多图片,而首屏出现的图片大概就一两张,那么我们还要一次性把所有图片都加载出来吗?显然这是愚蠢的,不仅影响页面渲染速度,还浪费带宽.这也就是们通 ...
- jQuery图片延迟加载插件jQuery.lazyload 的使用
使用方法 引用jquery和jquery.lazyload.js到你的页面 1 2 <script src="jquery-1.11.0.min.js"></sc ...
- 第一次自己写jquery图片延迟加载插件,不通用,但修改一下还是可以使用到很多页面上的
不断修改完善中…… /*! * jquery.lazyoading.js *自定义的页面图片延迟加载插件,比网上的jquery.lazyload简单,也更适合自己的网站 *使用方法: 把img 的cl ...
- jQuery图片切换插件jquery.cycle.js
Cycle是一个很棒的jQuery图片切换插件,提供了非常好的功能来帮助大家更简单的使用插件的幻灯功能 下载cycle插件并引入,此时,注意把引入它的代码放在引入jQuery主文件之后. <he ...
- JQuery图片延迟加载插件,动态获取图片长宽尺寸
以前的网站带宽小,没有特别多的大图,现在不同了,各种图片网站如同雨后春笋层出不穷.服务器是抗住了,但是客户端就有意见了,太多的图片必然导致页面加载缓慢,特别是有些table结构的站点更是如此.能否让图 ...
- jquery图片切换插件jquery.cycle.js参数详解
转自:国人的力量 blog.163.com/xz551@126/blog/static/821257972012101541835491/ 自从使用了jquery.cycle.js,我觉得再也不用自己 ...
- 图片延迟加载插件jquery.lazyload.js的使用方法
最新版的jquery.lazyload.js已不再是伪的延迟加载了 一.请按照基本使用方法说明设置 //载入JavaScript 文件 <script src="jquery.js&q ...
随机推荐
- vs2015 编译google v8
转自:http://blog.csdn.net/runningman2012/article/details/54692010 系统Win10 64位,vs2015 1. git 下载depot_to ...
- [UE4][Canvas]用C++代码绘制血条(HealthBar)
转自:http://aigo.iteye.com/blog/2275110 参考自Epic官方项目StrategyGame 血条效果: StrategyHUD.h StrategyHUD.cpp
- sublime 打开import require 模块文件的url 或路径的插件
结果一番周折,终于发现sublime提供的一个插件(open url)可以实现打开import file 路径的文件,比如import demo from “../path” 的文件在新窗口或者新标签 ...
- 怎样找到微信小程序功能呢?
怎样找到微信小程序功能呢? 17年1月9号这个功能刚推出时,非常火,但我在微信中迟迟找不到微信小程序功能,微信明明更新到了最新版也没有:后来经过以下步骤才找到这个功能! 1.微信版本不能过低,这个一般 ...
- rsync+inotfiy文件同步
rsync+inotfiy文件同步 1.部署rsync服务 yum install rsync #安装rsync,如果嫌yum版本过低也可以源码安装 2.vim /etc/rsyncd.conf #默 ...
- angularjs路由传递参数
ui-sref.$state.go 的区别 ui-sref 一般使用在 <a>...</a>: $state.go('someState')一般使用在 controller里面 ...
- Install Python on Mac (Anaconda)
Install Python on Mac (Anaconda) 标签(空格分隔): 运维 This blog is copy from the link: https://medium.com/@G ...
- 45.更新一下scrapy爬取工商信息爬虫代码
这里是完整的工商信息采集代码,不过此程序需要配合代理ip软件使用.问题:1.网站对ip之前没做限制,但是采集了一段时间就被检测到设置了反爬,每个ip只能访问十多次左右就被限制访问.2.网站对请求头的检 ...
- 笔记:Sublime Text 3
http://www.sublimetext.com/3 Sublime Text官网 http://www.sublimetextcn.com/3/ Sublime Text中文官网 http:// ...
- 《GPU高性能编程CUDA实战》第四章 简单的线程块并行
▶ 本章介绍了线程块并行,并给出两个例子:长向量加法和绘制julia集. ● 长向量加法,中规中矩的GPU加法,包含申请内存和显存,赋值,显存传入,计算,显存传出,处理结果,清理内存和显存.用到了 t ...