js中Image对象以及对其预加载处理示例
更新时间：2013年11月20日 16:15:48 作者：
现在的网页中经常会有一些图像连接，当鼠标指向它的时候，图像换成另外一幅图像，它们都是先预读图像的，下面也有个不错的实例，感兴趣的朋友可以参考下
不显示在文档中的 Image 对象
对于不显示在文档中的 Image 对象时用 var 语句定义的：
var myImage = new Image();或
var myImage = new Image(<图片地址字符串>);
然后就可以像一般 Image 对象一样对待 myImage 变量了。不过既然它不显示在文档中，以下属性：lowsrc, width, height, vspace, hspace, border 就没有什么用途了。一般这种对象只有一个用：预读图片(preload)。因为当对对象的 src 属性赋值的时候，整个文档的读取、JavaScript 的运行都暂停，让浏览器专心的读取图片。预读图片以后，浏览器的缓存里就有了图片的 Copy，到真正要把图片放到文档中的时候，图片就可以立刻显示了。现在的网页中经常会有一些图像连接，当鼠标指向它的时候，图像换成另外一幅图像，它们都是先预读图像的。
预读图像的 JavaScript 例子
var imagePreload = new Image();
imagePreload.src = '001.gif';
imagePreload.src = '002.gif';
imagePreload.src = '003.gif';
以上例子适合预读少量图片。
function imagePreload() {
var imgPreload = new Image();
for (i = 0; i < arguments.length; i++) {
imgPreload.src = arguments[i];
}
}
imagePreload('001.gif', '002.gif', '003.gif', '004.gif', '005.gif');
以上例子适合预读大量图片。
因为许多浏览器存在的缓存问题。当图片加载过一次之后，如果再有对该图片的请求时，由于浏览器已经缓存住这张图片了，不会再发起一次新的请求，而是直接请缓存中加载过来，经过分析，可以使用各个浏览器所兼容的Image的属性--complete。所以在图片onload事件之前先对这个值做下判断即可，如下例子：
function loadImage(url, callback) {
var img = new Image(); //创建一个Image对象，实现图片的预下载
img.src = url;
if (img.complete) { // 如果图片已经存在于浏览器缓存，直接调用回调函数
callback.call(img);
return; // 直接返回，不用再处理onload事件
}
img.onload = function () { //图片下载完毕时异步调用callback函数。
callback.call(img);//将回调函数的this替换为Image对象
};
};
对于不显示在文档中的 Image 对象时用 var 语句定义的：
复制代码 代码如下:
var myImage = new Image();或
var myImage = new Image(<图片地址字符串>);
然后就可以像一般 Image 对象一样对待 myImage 变量了。不过既然它不显示在文档中，以下属性：lowsrc, width, height, vspace, hspace, border 就没有什么用途了。一般这种对象只有一个用：预读图片(preload)。因为当对对象的 src 属性赋值的时候，整个文档的读取、JavaScript 的运行都暂停，让浏览器专心的读取图片。预读图片以后，浏览器的缓存里就有了图片的 Copy，到真正要把图片放到文档中的时候，图片就可以立刻显示了。现在的网页中经常会有一些图像连接，当鼠标指向它的时候，图像换成另外一幅图像，它们都是先预读图像的。
预读图像的 JavaScript 例子
复制代码 代码如下:
var imagePreload = new Image();
imagePreload.src = '001.gif';
imagePreload.src = '002.gif';
imagePreload.src = '003.gif';
以上例子适合预读少量图片。
复制代码 代码如下:
function imagePreload() {
var imgPreload = new Image();
for (i = 0; i < arguments.length; i++) {
imgPreload.src = arguments[i];
}
}
imagePreload('001.gif', '002.gif', '003.gif', '004.gif', '005.gif');
以上例子适合预读大量图片。
因为许多浏览器存在的缓存问题。当图片加载过一次之后，如果再有对该图片的请求时，由于浏览器已经缓存住这张图片了，不会再发起一次新的请求，而是直接请缓存中加载过来，经过分析，可以使用各个浏览器所兼容的Image的属性--complete。所以在图片onload事件之前先对这个值做下判断即可，如下例子：
复制代码 代码如下:
function loadImage(url, callback) {
var img = new Image(); //创建一个Image对象，实现图片的预下载
img.src = url;
if (img.complete) { // 如果图片已经存在于浏览器缓存，直接调用回调函数
callback.call(img);
return; // 直接返回，不用再处理onload事件
}
img.onload = function () { //图片下载完毕时异步调用callback函数。
callback.call(img);//将回调函数的this替换为Image对象
};
};
相关文章
今天小编就为大家分享一篇layer.confirm()右边按钮实现href的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
这篇文章主要介绍了JS获取当前网页大小以及屏幕分辨率等,方法虽简单，但比较实用，需要的朋友可以参考下2014-09-09
这篇文章主要给大家介绍了关于JavaScript中map用法的相关资料,JavaScript的map方法用于对数组中的每个元素执行一个函数,并返回一个新数组,它接受一个回调函数作为参数,该函数可以访问当前元素、索引和原始数组,需要的朋友可以参考下2024-12-12
'eval'函数是javascript中的一个内置函数,它的主要作用是将传入的字符串作为代码来执行,这篇文章主要介绍了为什么js中不推荐使用eval函数,需要的朋友可以参考下2023-10-10
图片实际宽高使用js进行获取以及根据图片大小进行自适应，此功能个人感觉比较实用，在此贡献出来，希望对大家有所帮助2013-08-08
这篇文章主要为大家详细介绍了微信小程序使用前置摄像头拍照，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-10-10
这篇文章主要介绍了js获取当前日期前七天的方法,涉及javascript中for语句及日期操作的技巧,需要的朋友可以参考下2015-02-02
Bootstrap table 服务器端分页功能实现方法示例
这篇文章主要介绍了Bootstrap table 服务器端分页功能实现方法,结合实例形式详细分析了Bootstrap table 服务器端后台交互与分页功能相关操作技巧,需要的朋友可以参考下2020-06-06
这篇文章主要为大家介绍了微信小程序自定义组件与页面的相互传参过程详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步早日升职加薪2022-04-04
修改 bootstrap table 默认detailRow样式的实例代码
这篇文章主要介绍了修改 bootstrap table 默认detailRow样式的实例代码，非常不错，具有参考借鉴价值,需要的朋友可以参考下2017-07-07
最新评论