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 ...
随机推荐
- 原生js(一)
Element对象有以下重要属性: 1.style. a) Element的css样式 b) 可以通过elem.style.backgroundColor = "red"的形式才动 ...
- Microsoft Security Essentials
https://support.microsoft.com/zh-cn/help/18900/consumer-antivirus-software-providers-for-windows 适 ...
- JVM垃圾收集器组合--各种组合对应的虚拟机参数实践
前言 相信很多人都看过下面这张图,(来自<深入理解Java虚拟机:JVM高级特性与最佳实践>) 在学完几种垃圾收集器类型及组合后,打算看看实际中程序用到的垃圾收集器. 但是在jconsol ...
- javascript prototype学习
function foo(a, b, c) { return a*b*c; } alert(foo.length); alert(typeof foo.constructor); alert(type ...
- 关于hp proliant sl210t服务器远程iLO接口的管理配置
提到hp proliant sl210t服务器,首先得提到HP ProLiant SL2500,HP ProLiant SL2500 可扩展系统提供了 一个非常密集的解决方案,可在标准 2U 机箱最多 ...
- 关于virgo-tomcat-server-3.6.0.RELEASE配置文件修改说明
Virgo项目Web服务器是EclipseRT项目的一部分,是一个完全模块化的Java运行时. Virgo自身就是设计为在标准OSGi框架实现(Equinox)之上的一个OSGi bundle集合. ...
- Unity3D笔记 英保通一
一.材质和着色器 1.材质和着色器紧密的联系,其中材质相当于是一个框架,而着色器就是框架中中的内容.在材质框架中可以选择不同的Shader并调节不同的 属性 Material和Physic Mater ...
- iOS - ipa安装包大小优化
在App Store上显示的下载大小和实际下载下来的大小,我们通过下表做一个对比: iPhone型号 系统 AppStore 显示大小 下载到设备大小 iPhone6 10.2.1 91.5MB 88 ...
- Linux:file命令显示自定义文件类型
file 命令可以查看文件类型信息,原理见: 非常Linux-file命令与magic file 修改 /ect/magic 文件后,可用 file 命令显示自定义文件类型信息. man magic ...
- 【紫书】BigInteger 高精度类型 原书上有一个bug:A+B!=B+A
存个代码 struct BigInterger { static const int BASE = 1e8; ; vector<int> s; BigInterger() { *this ...