<!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. 使用NumberPicker定制自己喜欢的Date&TimePicker

    1.NumberPicker简介: NumberPicker是Android3.0之后引入的一个控件,主要功能是用于选择一组预定义好数字的控件. 该控件主要需要指导一个用于监听当前value变化的li ...

  2. java笔记01-反射

    --2013年7月26日17:56:35 写文章之前,参考了这篇:http://www.cnblogs.com/Quincy/archive/2011/06/19/2084557.html 评价:这个 ...

  3. Adobe Edge Animate –Edge Commons强势来袭，Edge团队开发成为现实

    Adobe Edge Animate –Edge Commons强势来袭,Edge团队开发成为现实 版权声明: 本文版权属于 北京联友天下科技发展有限公司. 转载的时候请注明版权和原文地址. Edge ...

  4. Adobe Edge Animate –可重复使用的个性化按钮制作

    Adobe Edge Animate –可重复使用的个性化按钮制作 版权声明: 本文版权属于 北京联友天下科技发展有限公司. 转载的时候请注明版权和原文地址. 效果图: 工程文件中:

  5. 【杨氏矩阵+勾长公式】POJ 2279 Mr. Young's Picture Permutations

    Description Mr. Young wishes to take a picture of his class. The students will stand in rows with ea ...

  6. hdu 3401 单调队列优化动态规划

    思路: 动态方程很容易想到dp[i][j]=max(dp[i][j],dp[i-w-1][j-k]-k*ap[i],dp[i-w-1][j+k]+k*bp[i]): dp[i][j]表示第i天拥有j个 ...

  7. mysql千万级测试1亿数据的分页分析测试

    本文为本人最近利用几个小时才分析总结出的原创文章,希望大家转载,但是要注明出处 http://blog.sina.com.cn/s/blog_438308750100im0e.html 有什么问题可以 ...

  8. C# Windows Service服务的创建和调试

    前言 关于Windows服务创建和调试的文章在网络上的很多文章里面都有,直接拿过来贴在这里也不过仅仅是个记录,不会让人加深印象.所以本着能够更深刻了解服务项目的创建和调试过程及方法的目的,有了这篇记录 ...

  9. hive 未初始化元数据库报错

    启动hive-metastore和hive-server2 用beeline连接hive报错 [root@node04 hive]# beeline Beeline version 0.13.1-cd ...

  10. JDBC之数据连接

    :数据库语句: create database LandDB; use LandDB; create table T_BL_CANTON_CODE ( CTN_CODE int primary key ...