javascript图片预加载完整实例
本文实例讲述了javascript图片预加载的方法。分享给大家供大家参考，具体如下：
<!DOCTYPE >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>图片预加载</title>
</head>
<body>
<img id="song" width="300" src="http://www.baidu.com/img/bdlogo.gif" _src="http://p2009c.zbjimg.com/task/2009-12/03/188273/middlexznxwkia.gif" />
</body>
</html>
<script type="text/javascript">
//默认图片
var defurl = 'http://www.baidu.com/img/bdlogo.gif';
//一张大尺寸图片
var imgurl = 'http://www.planeart.cn/demo/imgReady/vistas24.jpg';
//一张gif图片
var gifurl = 'http://p2009c.zbjimg.com/task/2009-12/03/188273/middlexznxwkia.gif';
//图片预加载
function loadImage(url, callback) {
var img = new Image(); //创建一个Image对象，实现图片的预下载
img.onload = function(){
img.onload = null;//gif图片在ie下会循环请求
callback(img);
}
img.src = url;
}
var img = document.getElementById('song');
var url = img.getAttribute('_src')
loadImage(gifurl,function(){
//alert('ok');
img.src = url;
})
/**
* 网络上通用的图片预加载函数
* @param url
* @param callback
*/
var imgLoad = function (url, callback) {
var img = new Image();
img.src = url;
if (img.complete) {
callback(img.width, img.height);
} else {
img.onload = function () {
callback(img.width, img.height);
img.onload = null;
};
};
};
// 更新：
// 05.27: 1、保证回调执行顺序：error > ready > load；2、回调函数this指向img本身
// 04-02: 1、增加图片完全加载后的回调 2、提高性能
/**
* 图片头数据加载就绪事件 - 更快获取图片尺寸
*
* 原理：没有缓存的情况下，用计时器不断验证图片的大小是否发生变化，如果不在变化则为ready
* 如果有缓存则w3c浏览器会调用 complete，ie则会走 onload，都不在走 计时器那部分
*
* @version 2011.05.27
* @author TangBin
* @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);
}
;
};
})();
var img_url = 'http://www.planeart.cn/demo/imgReady/vistas24.jpg';
imgReady(img_url, function () {
//console.info(this.width);
//console.info(this.height);
alert(this.width + '\n' + this.height);
document.getElementById('song').src = img_url;
})
</script>
希望本文所述对大家JavaScript程序设计有所帮助。
相关推荐
-
基于javascript实现图片懒加载
一.定义 图片延迟加载也称为懒加载,延迟加载图片或符合某些条件时才加载某些图片,通常用于图片比较多的网页.可以减少请求数或者延迟请求数,优化性能. 二.呈现形式 [1]延时加载,使用setTimeout或setInterval进行加载延迟,如果用户在加载前就离开,自然就不会进行加载. [2]条件加载,符合某些条件或者触发了某些条件才开始异步加载. [3]可视区域加载,仅仅加载用户可以看到的区域,这个主要监控滚动条来实现,一般距离用户看到的底边很近的时候开始加载,这样能保证用户下拉时图片正好接上
-
Javascript实现图片懒加载插件的方法
前言 网络上各大论坛,尤其是一些图片类型的网站上,在图片加载时均采用了一种名为懒加载的方式,具体表现为,当页面被请求时,只加载可视区域的图片,其它部分的图片则不加载,只有这些图片出现在可视区域时才会动态加载这些图片,从而节约了网络带宽和提高了初次加载的速度,具体实现的技术并不复杂,下面分别对其说明. Web 图片的懒加载就是通过读取img元素,然后获得img元素的data-src(也可以约定为其他属性名)属性的值,并赋予img的src,从而实现动态加载图片的机制. 这里需要注意的是: img在初
-
javascript图片预加载实例分析
本文实例讲述了javascript图片预加载的方法.分享给大家供大家参考.具体如下: lightbox类效果为了让图片居中显示而使用预加载,需要等待完全加载完毕才能显示,体验不佳(如filick相册的全屏效果).javascript无法获取img文件头数据,真的是这样吗?本文通过一个巧妙的方法让javascript获取它. 这是大部分人使用预加载获取图片大小的例子: var imgLoad = function (url, callback) { var img = new Image(); i
-
javascript瀑布流式图片懒加载实例
最近项目使用到了"懒加载",现在更新一般,因为平时主要使移动端的开发所以库文件使用的是zepto.js .当然也可以和jQuery 通用. 代码如下: /** * Created by zhiqiang on 2015/10/14. * hpuhouzhiqiang@gmail.com * 图片的懒加载 **/ function loadImgLazy(node) { var lazyNode = $('[node-type=imglazy]', node), mobileHeight
-
解析javascript图片懒加载与预加载的分析总结
本篇文章主要介绍了懒加载和预加载两种技术的解析,废话不多说,一起来看吧. 懒加载也叫延迟加载:前一篇文章有介绍:JS图片延迟加载 延迟加载图片或符合某些条件时才加载某些图片. 预加载:提前加载图片,当用户需要查看时可直接从本地缓存中渲染. 两种技术的本质:两者的行为是相反的,一个是提前加载,一个是迟缓甚至不加载.懒加载对服务器前端有一定的缓解压力作用,预加载则会增加服务器前端压力. 懒加载的意义及实现方式有: 意义: 懒加载的主要目的是作为服务器前端的优化,减少请求数或延迟请求数. 实现方式:
-
javascript图片预加载完整实例
本文实例讲述了javascript图片预加载的方法.分享给大家供大家参考,具体如下: <!DOCTYPE > <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>图片预加载</tit
-
理解Javascript图片预加载
预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布,也可帮助用户在浏览你网站内容时获得更好的用户体验.本文将分享三个不同的预加载技术,来增强网站的性能与可用性. 方法一:用CSS和JavaScript实现预加载 实现预加载图片有很多方法,包括使用CSS.JavaScript及两者的各种组合.这些技术可根据不同设计场景设计出相应的解决方案,十分高效.
-
学习JavaScript图片预加载模块
前言 在一个应用中,通常会有很多图片,众所周知,加载图片需要时间,在图片没有加载出来之前,页面会是空白,为了提升用户体验,应用的开发人员使出浑身解数,其中最为常见的就是在图片没有加载完成之前,有一个加载动画.这里用到的技术主要是图片预加载.图片预加载的原理并不难,当给一个Image对象设置src属性后,图片就开始加载.给Image对象指定事件要位于设置src属性之前. 涉及到的内容 1.需要预加载的图片并不仅仅只是一张,通常将所有图片的信息保存在一个数组或者对象中,为了加载所有的图片,需要遍历出
-
再谈javascript图片预加载技术(详细演示)
而本文所提到的预加载技术主要是让javascript快速获取图片头部数据的尺寸. 一段典型的使用预加载获取图片大小的例子: 复制代码 代码如下: var imgLoad = function (url, callback) { var img = new Image(); img.src = url; if (img.complete) { callback(img.width, img.height); } else { img.onload = function () { callback(
-
JavaScript模仿Pinterest实现图片预加载功能
前言 对于Pinterest网站,从前端设计出发的话,我们一定不会忘记我们曾经非常流行的瀑布流布局.但是今天,给大家简要分析下 Pinterest上另外一项非常值得借鉴图片加载细节. 看看下面的截图: 大家可以感觉到图片出来的时候预先绘制轮廓,重点是预制区域的颜色采用与图片较为相似的色彩值,当图片加载完全后,会有种渐入的效果. 其中谷歌的图片搜索也用到了类似效果: 我们称之为这种效果为Color Placeholder [色彩预置],当图片加载的时候,我们优先显示其所在容器的背景颜色(如同很多会
-
javascript实现图片预加载和懒加载
本文实例为大家分享了javascript实现图片预加载和懒加载的具体代码,供大家参考,具体内容如下 预加载 预加载是预先加载好后面需要用到的资源, 后面使用的时候直接去缓存里取.举个栗子, 比如一个网站的开场动画, 这些动画是由很多图片组成的, 假如不预先加载好, 那就会造成动画不流畅产生闪动白屏.图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,保证了图片快速.无缝地发布,使用户在浏览你网站内容时获得更好的用户体验. //这里我把图片数量写死了,而且对图片名也有要求必须是阿拉伯数字后缀
-
利用CSS、JavaScript及Ajax实现图片预加载的三大方法
预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布,也可帮助用户在浏览你网站内容时获得更好的用户体验.本文将分享三个不同的预加载技术,来增强网站的性能与可用性. 方法一:用CSS和JavaScript实现预加载 实现预加载图片有很多方法,包括使用CSS.JavaScript及两者的各种组合.这些技术可根据不同设计场景设计出相应的解决方案,十分高效.
-
利用CSS、JavaScript及Ajax实现图片预加载的方法
预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布,也可帮助用户在浏览你网站内容时获得更好的用户体验.本文将分享三个不同的预加载技术,来增强网站的性能与可用性. 实现图片预加载可以使用css.JavaScript.Ajax三种方法.下面分别介绍这些方法的实现. 使用CSS 单纯的使用css可以将图片加载到页面元素的背景上,这种方法简单.高效: #d
-
基于javascript实现图片预加载
一.定义 预加载图片是提升用户体验的一个好办法,提前加载用户所需的图片,保证图片快速.无缝发布,使用户在浏览器网站时获得更好用户体验.常用于图片画廊等应用中. [注意]若使用即时加载,加载的图片与页面的其他内容一起加载会增加页面的整体加载时间,所以使用window.onload比较合适. 二.两种思路 1.使用背景图像 使用页面无用元素的背景图片预加载 <style> body{ margin: 0; } img{ width: 100px; height: 100px; } ul{ marg