jquery.lazyload 使用
1、引用js
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.lazyload.js" type="text/javascript"></script>
2、需要加载的图片写成以下的形式:
<img class="lazy" data-original="img/example.jpg" width="640" height="480">
或者: <img class="lazy" data-original="img/example.jpg" src="/Content/images/home/nopic_shop.png" width="640" height="480"> 最下面的是有默认图的。建议用下面的
3、在要加载的页面,加上js
$(function() {
$("img.lazy").lazyload();
});
我一般使用下面有效果的模式:
//加载图片
$("img.lazy").lazyload({
effect: "fadeIn"
});
更多需求文档,请参考官方的介绍:
http://www.appelsiini.net/projects/lazyload
jquery.lazyload 使用的更多相关文章
- 延迟加载外部js文件,延迟加载图片(jquery.lazyload.js和echo,js)
js里一说到延迟加载,大都离不开两种情形,即外部Js文件的延迟加载,以及网页图片的延迟加载: 1.首先简单说一下js文件的3种延迟加载方式: (1)<script type="text ...
- 图片懒加载jquery lazyload
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>& ...
- 懒加载插件- jquery.lazyload.js
Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...
- jQuery.lazyload
Lazy Load延迟加载也有的称为惰性加载,是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它 ...
- jquery.lazyload 实现图片延迟加载jquery插件
看到了淘宝产品介绍中,图片是在下拉滚动条时加载,这是一个很不错的用户体验.减少了页面加载的时间了,也减轻了服务器的压力,就查了下用JQuery.. 什么是ImageLazyLoad技术 在页面上图 ...
- jquery懒加载jquery.lazyload.js
Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...
- jQuery lazyload 懒加载
Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...
- jQuery.lazyload使用及源码分析
前言: 貌似以前自己也写过图片懒加载插件,但是新公司使用的是jQuery.lazyload插件,为了更好的运用,自己还是把源码看了遍,分别记录了如何使用, 插件原理,各个配置属性的完整解释,demo实 ...
- jQuery.lazyload详解
<SCRIPT src="jquery.js" type=text/javascript></SCRIPT> <SCRIPT src="jq ...
- jQuery延迟加载(懒加载)插件 – jquery.lazyload.js
引入:<script type="text/javascript" src="${base}/resources/shop/js/jquery.lazyload.j ...
随机推荐
- 关于array.sort(array,array)
// 基于第一个 System.Array 中的关键字,使用每个关键字的 System.IComparable 实现,对两个一维 System.Array // 对象(一个包含关键字,另一个包含对应的 ...
- Visual Studio for Mac离线安装教程
Visual Studio for Mac离线安装教程 可以在线安装,也可以离线安装(本次安装博主使用离线,在线安装失败了) 据说翻个墙就可以,有条件的就翻吧 没条件的我于是选择离线安装………… 离线 ...
- css3整理--border-image
border-image语法: border-image : none | <image> [ <number> | <percentage>]{1,4} [ / ...
- 题目1442:A sequence of numbers(数列计算以及二分求幂运用)
题目链接:http://ac.jobdu.com/problem.php?pid=1442 详解链接:https://github.com/zpfbuaa/JobduInCPlusPlus 参考代码: ...
- angularjs笔记《二》
小颖最近不知怎么了,老是犯困,也许是清明节出去玩,到现在还没缓过来吧,玩回来真的怕坐车了,报了个两日游得团,光坐车了,把人坐的难受得,去了也就是爬山,回来感觉都快瘫了,小颖去的时候还把我家仔仔抱着一起 ...
- [原]RHEL7/Centos 7将网卡名称改为eth0
======问题===== rhel的网卡为enoxxxxxxxxx =====原因====== 从CentOS/RHEL7起,可预见的命名规则变成了默认.这一规则,接口名称被自动基于固件,拓扑结构和 ...
- Packetbeat协议扩展开发教程(1)
Packetbeat ( https://www.elastic.co/products/beats/packetbeat )是一个开源的网络抓包与分析框架,内置了很多常见的协议解析,如HTPP.My ...
- iOS开发过程中使用Core Data应避免的十个错误
原文出处: informit 译文出处:cocoachina Core Data是苹果针对Mac和iOS平台开发的一个框架,主要用来储存数据.对很多开发者来说,Core Data比较容易入手,但很 ...
- java常用数据格式转化,类似数据库group by cube rollup
java常用数据格式转化,类似数据库group by cube rollup单循环一条sql返回格式如:List<Map<String, List<Record>>> ...
- js模拟点击打开超链接
js模拟点击打开超链接,页面上有一些锚文本,如果用 JS 批量在新窗口打开. jquery示例: <div class="link"> <a href=" ...