<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>jquery图片延迟加载</title>

<script src="js/jquery-1.6.js" type="text/javascript"></script>

<script src="js/lyz.delayLoading.min.js" type="text/javascript"></script>

<script type="text/javascript">

$(function () {

	$("img").delayLoading({

		defaultImg: "images/loading.jpg",    // 预加载前显示的图片

		errorImg: "",                        // 读取图片错误时替换图片(默认：与defaultImg一样)

		imgSrcAttr: "originalSrc",           // 记录图片路径的属性(默认：originalSrc，页面img的src属性也要替换为originalSrc)

		beforehand: 0,                       // 预先提前多少像素加载图片(默认：0)

		event: "scroll",                     // 触发加载图片事件(默认：scroll)

		duration: "normal",                  // 三种预定淡出(入)速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000),默认:"normal"

		container: window,                   // 对象加载的位置容器(默认：window)

		success: function (imgObj) { },      // 加载图片成功后的回调函数(默认：不执行任何操作)

		error: function (imgObj) { }         // 加载图片失败后的回调函数(默认：不执行任何操作)

	});

});

</script>

<style type="text/css">

.box{ width:1200px; margin:0 auto;}

.box ul li { width:245px; height:245px; float:left; margin:10px; border:1px solid #e6e6e6; list-style:none; }

.box ul li img{ width:100%; min-height:245px;}

</style>

</head>

<body>

	<div class="box">

		<ul>

	        <li><img originalsrc="data:images/1.jpg" /></li>

	        <li><img originalsrc="data:images/2.jpg" /></li>

	        <li><img originalsrc="data:images/3.jpg" /></li>

	        <li><img originalsrc="data:images/4.jpg" /></li>

	        <li><img originalsrc="data:images/5.jpg" /></li>

	        <li><img originalsrc="data:images/6.jpg" /></li>

	    </ul>

	</div>

</body>

　　

jquery Loading图片延迟加载特效的更多相关文章

  1. 非常酷的jQuery/HTML5图片滑块特效 带弹性菜单

    新的一周刚刚开始,当我迷迷糊糊坐在办公桌前时,又不自主的去看了一些jQuery和HTML5的应用插件,今天我们来看一款非常酷的jQuery/HTML5图片滑块特效,这款插件的特点是图片上不错的弹性菜单 ...

  2. Jquery.ScrollLoading图片延迟加载技术

    关于分屏加载图片,像天猫.京东等电商图片较多页面很长,就采用了延迟加载技术. 目前很流行的做法就是滚动动态加载,显示屏幕之外的图片默认是不加载的, 随着页面的滚动,显示区域图片才被动态加载. 原理其实 ...

  3. 40免费的 jQuery & CSS3 图片热点特效

    jQuery CSS3 形象悬停效果可能是一个优秀的网站项目中添加的效果.这个特殊的收集是大约50个 jQuery CSS3 形象徘徊影响最近出版的.这些图像悬停效果可以作为一个有效的和创造性的方式添 ...

  4. jQuery实现图片延迟加载

    html: <img src ="占位图路径" data-original="真实图片路径" /> js: $("img").l ...

  5. JQuery.lazyload 图片延迟加载

    1.引入  jquery.lazyload.js 2. 延时加载的方式 <script type="text/javascript">  $(function() {  ...

  6. jQuery Lazy Load 图片延迟加载

    基于 jQuery 的图片延迟加载插件,在用户滚动页面到图片之后才进行加载. 对于有较多的图片的网页,使用图片延迟加载,能有效的提高页面加载速度. 版本: jQuery v1.4.4+ jQuery ...

  7. jquery图片延迟加载 及 serializeArray、serialize用法记录

    1.使用jquery实现 图片延迟加载 由于用户访问页面需要加载很多的图片,延迟加载技术在电子商务网站领域越来越普及,淘宝商城,京东商城,凡客等访问量巨大的电子商务站点为了增加用户用户体验,访问速度以 ...

  8. 图片延迟加载jquery插件imgLazyLoading

    实现了图片延迟加载功能,插件代码非常简洁,且每个功能都把注释写得非常详细,适合网友们学习,好好利用哦 引入图片延迟加载Jquery插件文件后,页面使用代码如下: <script type=&qu ...

  9. 20+功能强大的jQuery/CSS3图片特效插件

    以下是分享的20几个不错的图片特效插件,基于jQuery和CSS3. 1.jQuery图片下滑切换播放效果 这是一款基于jQuery的焦点图插件,这款焦点图的特点是有向下滑动的动画效果,滑到底部时,有 ...

随机推荐

  1. T4 文本模板编写准则

    如果要在 Visual Studio 中生成程序代码或其他应用程序资源,遵守以下一般准则可能非常有帮助. 它们并不是一成不变的规则. 设计时 T4 模板准则 设计时 T4 模板是在设计时在 Visua ...

  2. Getting started with Apache Camel--转载

    原文地址:http://www.javacodegeeks.com/2012/12/getting-started-with-apache-camel.html About Camel: Apache ...

  3. IIS 允许无后缀文件访问的配置

    最近一个项目 前端开发用了一大堆无后缀的html模板,问题就是发布到IIS以后访问 模板文件报404错误.无法下载. 百度 谷歌 搜一堆 都是MIME里添加 '.*' 实际上无效 正解是: MIME里 ...

  4. python 调用zabbix api接口实现主机的增删改查

    python程序调用zabbix系统的api接口实现对zabbix_server端主机的增删改查,使用相关功能时候,需要打开脚本中的相关函数. 函数说明: zabbixtools()  调用zabbi ...

  5. Centos6.4最小化安装后使用xfce桌面环境

    由于我个人使用的Centos是在虚拟机中最小化安装的,gnome实在是不喜欢,所以自己装了个xfce,安装后启动不起来,才发现x window等依赖环境没装,为了少走弯路,在此写下安装过程. 1.yu ...

  6. Java代码操作Redis的sentinel和Redis的集群Cluster操作

    总共四台机器,crxy99,crxy98分别是主节点和从节点.   crxy97和crxy96是两个监控此主从架构的sentinel节点. 看代码: import org.junit.Test; im ...

  7. [改善Java代码]若有必要,使用变长数组

    Java中的数组是定长的,一旦经过初始化声明就不可改变长度,这在实际使用的时候非常不方便.比如要对一个班级的学生信息进行统计,因为我们不知道班级会有多少个学生(随时可能有退学,入学,转学),所以需要一 ...

  8. BZOJ 3505

    3505: [Cqoi2014]数三角形 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 1171  Solved: 703[Submit][Statu ...

  9. Commons JXPath - Object Graph Traversal

    JXPath 提供了使用 Xpath 语法操纵符合 Java 类命名规范的 JavaBeans 的工具.也支持 maps.DOM 和其他对象模型.对于深层次结构的 JavaBean,使用 JXPath ...

  10. 【Knockout】四、绑定上下文

    Binding context binding context是一个保存数据的对象,你可以在你的绑定中引用它.当应用绑定的时候,knockout自动创建和管理binding context的继承关系. ...