js中Image对象以及对其预加载处理
来源:互联网 发布:h3c 端口聚合 lacp 编辑:程序博客网 时间:2024/04/28 16:21
不显示在文档中的 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对象
};
};
- js中Image对象以及对其预加载处理
- js Image()对象onload和预加载
- js 对象以及其基本操作
- 处理SSM框架中css、js、image等加载不出来
- js 实现图片预加载 (js操作 Image对象属性complete ,事件onload 异步加载图片)
- js 实现图片预加载 (js操作 Image对象属性complete ,事件onload 异步加载图片)
- js 实现图片预加载 (js操作 Image对象属性complete ,事件onload 异步加载图片)
- js 实现图片预加载 (js操作 Image对象属性complete ,事件onload 异步加载图片)
- js 实现图片预加载 (js操作 Image对象属性complete ,事件onload 异步加载图片)
- js值字符集编码以及对其应用的理解
- 预加载与JavaScript的Image()对象
- JS-中对表单处理
- C++中sizeof和结构体以及内存对其
- Arcgis js featureLayer加载完成之后,对其加载的要素重新定义样式
- OC中对象类型以及其常用方法
- c++在堆中创建对象被对其操作
- js中document.documentElement 和document.body 以及其属性
- js中document.documentElement 和document.body 以及其属性
- Using the Windows Headers
- PHP Redis基本命令查找
- 实现图像特效之浮雕与雕刻
- ZeroMQ(java)之Publish/Subscribe模式
- 21世纪初最有影响力的20篇计算机视觉期刊论文
- js中Image对象以及对其预加载处理
- EXT.NET GridPanel 鼠标经过列位置tip提示内容
- 收藏的站外网址
- 深入Android —— 任务和进程
- 各式 Web 前端開發工具整理
- 第13周项目3-求助
- 深入Android —— 界面构造
- 详解java中接口与抽象类的区别
- 日文食物对照表