<!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. c#_错误处理_基础

    attribute: using System; using System.Collections.Generic; using System.Linq; using System.Web; usin ...

  2. PhpCMS标签：专题模块special标签

    专题模块 专题模块PC标签调用说明 模块名:special 模块提供的可用操作 操作名 说明 lists 专题列表 content_list 专题信息列表 hits 专题信息点击排序 下面对所有的操作 ...

  3. Debian安装Apache2+MySQL5+PHP5（zz）

    转载:http://hi.baidu.com/lostdays/item/1d5e7e4833b4d20fc116134b 终于在Debian用apt-get安装好LAMP了,之前在CentOS使用编 ...

  4. Server Tomcat v7.0 Server at localhost failed to start.错误可能原因之一

    故事由来: 学Servlet中,突然发现启动Tomcat时出现这个问题 故事梗概: 学习servlet尽然能碰到服务器起不来的,百思不得其解,然后我百度,我FQgoogle,找stackoverflo ...

  5. 乐在其中设计模式(C#) - 代理模式(Proxy Pattern)【转】

    介绍 为其他对象提供一个代理以控制对这个对象的访问. 示例 有一个Message实体类,某对象对它的操作有Insert()和Get()方法,用一个代理来控制对这个对象的访问. MessageModel ...

  6. Android studio设置参数提示

    在Android studio的使用的过程中,那么就需要对当前的代码显示当前的方式做一个的提示信息,那么可以通过Android studio的的设置的方法,来对Android studio方法的提示显 ...

  7. centos7重置root开机登录密码

    今天忘记了centos7 root登录的密码,本来要好好的做个图文的教程也好啊,但是忘记截图什么的,就不在重复的工作了, 参考了下面的两个链接重置了密码,结合使用效果更好哦,嘿嘿.. 下次要是再遇到这 ...

  8. 【欧拉定理】计算(a^(b^c))%1000000007

    欧拉定理(称费马-欧拉定理或欧拉 函数定理) 欧拉定理表明,若n,a为正整数,且n,a互素(即gcd(a,n)=1),则 这个定理可以用来简化幂的模运算.比如计算7222的个位数,实际是求7222被1 ...

  9. 【LIC】O(nlogn)解法

    [LIC--最长递增子序列问题] 在一列数中寻找一些数,这些数满足:任意两个数a[i]和a[j],若i<j,必有a[i]<a[j],这样最长的子序列称为最长递增子序列. O(nlogn)算 ...

  10. [算法练习] UVA-401-Palindromes

    UVA Online Judge 题目401  Palindromes 回文串 问题描述: 回文串(Palindromes)就是正着读和反着读完全一样的字符串,例如"ABCDEDCBA&qu ...