/**
* 图片头数据加载就绪事件 - 更快获取图片尺寸
* @version 2011.05.27
* @author TangBin
* @see http://www.planeart.cn/?p=1121
* @param {String} 图片路径
* @param {Function} 尺寸就绪
* @param {Function} 加载完毕 (可选)
* @param {Function} 加载错误 (可选)
* @example imgReady('http://www.google.com.hk/intl/zh-CN/images/logo_cn.png', function () {
alert('size ready: width=' + this.width + '; height=' + this.height);
});
*/
var imgReady = (function () {
var list = [], intervalId = null,
// 用来执行队列
tick = function () {
var i = 0;
for (; i < list.length; i++) {
list[i].end ? list.splice(i--, 1) : list[i]();
};
!list.length && stop();
},
// 停止所有定时器队列
stop = function () {
clearInterval(intervalId);
intervalId = null;
};
return function (url, ready, load, error) {
var onready, width, height, newWidth, newHeight,
img = new Image();
img.src = url;
// 如果图片被缓存,则直接返回缓存数据
if (img.complete) {
ready.call(img);
load && load.call(img);
return;
};
width = img.width;
height = img.height;
// 加载错误后的事件
img.onerror = function () {
error && error.call(img);
onready.end = true;
img = img.onload = img.onerror = null;
};
// 图片尺寸就绪
onready = function () {
newWidth = img.width;
newHeight = img.height;
if (newWidth !== width || newHeight !== height ||
// 如果图片已经在其他地方加载可使用面积检测
newWidth * newHeight > 1024
) {
ready.call(img);
onready.end = true;
};
};
onready();
// 完全加载完毕的事件
img.onload = function () {
// onload在定时器时间差范围内可能比onready快
// 这里进行检查并保证onready优先执行
!onready.end && onready();
load && load.call(img);
// IE gif动画会循环执行onload,置空onload即可
img = img.onload = img.onerror = null;
};
// 加入队列中定期执行
if (!onready.end) {
list.push(onready);
// 无论何时只允许出现一个定时器,减少浏览器性能损耗
if (intervalId === null) intervalId = setInterval(tick, 40);
};
};
})();
发表评论
-
js判断一个图片是否已经存在于缓存
2013-05-31 15:15 7183【解决】js判断一个图片是否已经存在于缓存(兼容IE各版本及 ... -
java 加密解密算法总结(转)
2013-03-19 11:28 802package tianya.cn.main; im ... -
深入了解Struts2返回JSON数据的原理及具体应用范例
2013-03-18 09:40 1115转载自: http://yshjava.iteye.com/ ... -
ICE:slice语言常识整理
2013-01-28 10:53 1719============================== ... -
ICE实例
2013-01-25 17:46 852本文将结合实际项目,做一个基于ice的实际项目实例应用,该实例 ... -
ICE转摘学习
2013-01-25 17:44 759Ice 出自ZeroC名门之 ... -
Google 浏览器css hack 写法
2013-01-16 11:09 704针对Chrome和Safari等Webkit核心浏览器的CS ... -
js 事件冒泡
2012-11-19 14:40 847JavaScript事件冒泡简介及应用 一、什么是事 ... -
ant 常用命令
2012-11-12 22:03 1319C:\>ant -help\-h 获取ant的帮助信息( ... -
jQuery获取tagName的方法
2012-09-29 16:52 686在javascript中要取得tagName十分简单,但在jQ ... -
test
2012-09-06 00:16 0<!DOCTYPE html PUBLIC " ... -
java 访问url获取别人的接口服务
2012-08-09 21:51 0** * 程序中访问http数据接口 ... -
Java IO系统之IO系统类层次关系
2012-08-08 09:13 0流是字节序列的抽象概念。 文件是数据的静态存储形式,而流 ... -
java缓存
2012-08-06 12:47 0JAVA缓存技术 JavaJNICacheL ... -
图片滚动带滚动条
2012-07-25 00:08 764<!DOCTYPE html PUBLIC " ... -
Web.xml文件配置
2012-06-12 23:56 727一个简单的web文件配置参考 <?xml versio ... -
java getResource()和getResourceAsStream以及路径问题(转)
2012-06-12 23:54 822用JAVA获取文件,听似简单,但对于很多像我这样的新人来说,还 ... -
MYSQL常用命令
2012-05-27 18:10 704MYSQL常用命令 1.导出整个数据库 mysqldump ... -
hibernate 使用二级缓存 配置
2012-05-26 23:57 973配置二级缓存主要有两个步骤。 选择需要使用第三方二级缓存 ... -
jQuery.extend函数详解
2012-05-25 17:37 705jQuery.extend 函数详解 JQuery的exten ...
相关推荐
jquery.lazyload图片预加载 调用简单 内有实例
HTML+jquery图片预加载功能,实用于web及移动端
图片预加载特效,
JS javascript 图片 预加载 实现图片的加载
lazyload图片预加载js文件盒相关示例代码
经过自己的整理,能实现图片预加载效果的效果,有效减少带宽的占用,网页图片预加载效果
jquery图片预加载延迟加载 先打开默认图片,随后顺序加载 优化打开速度 提升用户体验 极力推荐
站点实现预加载loading,但指定区域中图片未加载完,则实现自定义小图标,图片加载完后进入真正内容
jQuery实现图片预加载,些插件在jquery基础上进行封装。大家可以对插件进行修改。
图片预加载插件---preload.js
通过图片预加载技术,使得图片加载更为流畅,和谐。当图片的大小比较大时,图片也可以自动调整宽度和高度,同时图片也能居中。
瀑布流 图片预加载 实例
tempImg.src属性可以在后台加载这张图片到本地缓存实现预加载
用jQuery实现图片预加载,内含jquery1.3的js
手机页面预加载效果,一些预加载的效果!酷炫的加载效果
NULL 博文链接:https://chen-miao.iteye.com/blog/1496730
wxapppreload微信小程序图片预加载.zip wxapppreload微信小程序图片预加载.zip wxapppreload微信小程序图片预加载.zip wxapppreload微信小程序图片预加载.zip wxapppreload微信小程序图片预加载.zip
要同时大量图片,由于网络、图片大小等因素导致网页加载慢,这种用户体验很差的形式应该避免出现。类似于淘宝的图片预加载功能。 该js文件是为了实现图片预加载或者延迟加载的功能,提高用户体验。
带有图片预加载技术的jquery图片幻灯代码,比较简洁,左右两侧可以手动播放图片,需要把鼠标放在图片上,此时会显示控制文字,如图所示。本焦点图中运用了图片预加载技术,在网络不佳的状况下会有更好的表现。