<!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. UNIX基础知识之信号

    本篇博文内容摘自<UNIX环境高级编程>(第二版),仅作个人学习记录所用.关于本书可参考:http://www.apuebook.com/. 信号(signal)是通知进程已发生某种情况的 ...

  2. 关于try...catch...finally中return的疑惑

    原文:http://www.cnblogs.com/and_he/archive/2012/04/17/2453703.html 关于try...catch...finally里面的return一直是 ...

  3. 小白日记41：kali渗透测试之Web渗透-SQL手工注入（三）-猜测列名、表名、库名、字段内容，数据库写入

    SQL手工注入 靶机:metasploitable(低)  1.当无权读取infomation_schema库[MySQL最重要的源数据库,必须有root权限]/拒绝union.order by语句 ...

  4. setting bundle 多语言，本地化，系统设置

    新建一个setting.bundle后结构如下: Settings.bundle en.lproj Root.strings Root.plist 大家一般都在Root.plst里面添加删除条目,那么 ...

  5. oracle存储过程分页

    1.首先在oracle中建包体,用于游标返回当前数据记录集 CREATE OR REPLACE PACKAGE pkg_query AS TYPE cur_query IS REF CURSOR; E ...

  6. 关于cmd模式下切换目录

    cmd下切换目录: 经常犯下的错误一: 在默认路径下输入 cd D: 想切换到D盘但是会出现上面的现象. 正确的的做法是直接输入要转移到的盘符: D:  就可以了. 在这种情况下再输入cd D:

  7. hostname

    http://www.linuxidc.com/Linux/2014-11/109238.htm

  8. Linux 命令 - killall: 通过进程名向进程发送信号

    命令格式 killall [-Z CONTEXT] [-u USER] [ -eIgiqrvw ] [ -SIGNAL ] NAME... killall -l, --list killall -V, ...

  9. 关于Java的this关键字

    java中的this随处可见,用法也多,现在整理有几点: 1. this是指当前对象自己. 当在一个类中要明确指出使用对象自己的的变量或函数时就应该加上this引用.如下面这个例子中: public ...

  10. Android 分析工具 APKAnalyser

    APKAnalyser 是 Android 静态,虚拟分析工具,用来测试和验证 Android 应用的开发工作.ApkAnalyser 是个完整的工具链,可以修改二进制应用.用户可以改装,安装,运行, ...