<!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基础知识之用户标识

    一.用户ID 口令文件(/etc/passwd)登录项中的用户ID(user ID)是个数值,它向系统标识各个不同的用户.系统管理员在确定一个用户的登录名的同时,确定其用户ID.用户不能更改其用户ID ...

  2. 小白日记42：kali渗透测试之Web渗透-SQL盲注

    SQL盲注 [SQL注入介绍] SQL盲注:不显示数据库内建的报错信息[内建的报错信息帮助开发人员发现和修复问题],但由于报错信息中提供了关于系统的大量有用信息.当程序员隐藏了数据库内建报错信息,替换 ...

  3. Recommended you 3 most popular Nissan pincode calculators

    Have you still felt confused on how to choose a satisfactory Nissan pin code calculator in the marke ...

  4. jQuery moblie 配合jQuery 实现移动端下拉刷新

    <script type="text/javascript" src="http://bj.jiaju001.com/static/js/jquery-1.9.0. ...

  5. LeetCode 11

    Container With Most Water Given n non-negative integers a1, a2, ..., an, where each represents a poi ...

  6. [改善Java代码]不同的场景使用不同的泛型通配符

    Java泛型支持通配符(Wildcard),可以单独使用一个"?"表示任意类,也可以使用extends关键字标识某一类(接口)的子类型,还可以使用super关键字标识某一类(接口) ...

  7. ubuntu不能正常使用make menuconfig的解决方案

    so easy sudo apt-get install build-essentialsudo apt-get install libncurses5sudo apt-get install lib ...

  8. Nginx - Events Module

    The Events module comes with directives that allow you to configure network mechanisms. Some of the ...

  9. markdown编辑

    有用的技巧之,如何实现首行空两格,把输入法切换成全角(shift+space),就可以实现一个两字符的空格了. 一级标题 二级标题 三级标题 四级标题 五级标题 六级标题 w s r s r s 文本 ...

  10. EXCEL跨工作薄查找。提取信息

    =IF(ISERROR(INDEX(zdy!$B:$B,MATCH(B15,zdy!$B:$B,0))),"不存在",INDEX(zdy!$C:$C,MATCH(B15,zdy!$ ...