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 ...
随机推荐
- windows8 Metro App用Javascript来调用C#的library
(转自:http://www.ronaldwidha.net/2012/05/10/winrt-calling-c-csharp-class-libraries-from-winjs-javascri ...
- dos 下如何查看环境变量
使用命令:echo %path%
- Android 冷启动时间优化
一 下载工具: 1.MaterialColdStart https://github.com/DreaminginCodeZH/MaterialColdStart 2.AndroidSVGScript ...
- Spark学习笔记--Linux安装Spark集群详解
本文主要讲解如何在Linux环境下安装Spark集群,安装之前我们需要Linux已经安装了JDK和Scala,因为Spark集群依赖这些.下面就如何安装Spark进行讲解说明. 一.安装环境 操作系统 ...
- sencha touch Container 监听超链接插件
有时候内容直接从后台获取,有可能包含超链接,打包成应用之后,点击会造成不好的后果,这样做能够用外部浏览器打开.需要Cordova支持 监听插件代码: /* *监听a标签,用外部浏览器打开链接 */ E ...
- 禁用ngen版本的.NET Framework dll加载
在调试时会发现出于性能考虑.NET Framework dll加载的都是ngen版本,比如:System.dll,实际加载System.ni.dll. 如果希望加载非ngen版本,可以设置系统环境变量 ...
- 解决IE6下透明图片有背景的问题
描述,透底的图片,在其他浏览器中效果: 在IE6中的效果: 1.改图片 IMG 换用gif格式的图片,但是这样的话图片效果不好: 想让IE6用gif的图片,其他浏览器用png图片,但是只有IE有这样 ...
- where are you from
where are you from 如果问美国人这句话的话,他们一般会说: I'm from California. I'm from Pennsylvanian. 一般是说州,而不是说Americ ...
- Mysql带返回值与不带返回值的2种存储过程
过程1:带返回值: 1 drop procedure if exists proc_addNum; 2 create procedure proc_addNum (in x int,in y int, ...
- python3查询数据库并生成excel报表
#!/usr/bin/env python3 #encoding=UTF- import os import time import xlwt hostIp = 'xxx.xxx.xxx.xx' us ...