博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
js预载入 new Image对象
阅读量:5145 次
发布时间:2019-06-13

本文共 2279 字,大约阅读时间需要 7 分钟。

图像预载入 

对于浏览器载入图像来说,只有在对图像发送一个 HTTP请求之后,它们才会被浏览器载入,对图像的 HTTP 请求要么使用 <img> 标记,要么通过方法调用实现。如果使用 JavaScript 脚本来处理在 mouseover 事件时交换图像,或者在一段时间之后自动更改图像,那么在从服务器获取图像时可能要等上几秒钟到几分钟的时间。如果使用一个慢速的 Internet 连接,或者要获取的图像非常大,或者其它一些情况,这种现象就特别明显;这样,延迟就造成你不能达到自己期望的效果。 
一些浏览器采用一些措施来缓解这一问题,比如试图通过在本地缓存中存储图像,从而使随后对图像的调用能够立即被满足;但是在图像第一次被调用时依然会存在一些延迟。预载入是在需要图像之前将其下载到缓存的一种方法。通过这一措施,当真正需要图像时,它就可以被立即从缓存中取出,从而能够立即显示。 

 

图像对象:

建立图像对象:图像对象名称=new Image([宽度],[高度])

图像对象的属性: border complete height hspace lowsrc name src vspace width

图像对象的事件:onabort onerror onkeydown onkeypress onkeyup onload

需要注意的是:src 属性一定要写到 onload 的后面,否则程序在 IE 中会出错。

参考代码:

var img=new Image();  img.οnlοad=function(){alert("img is loaded")};  img.οnerrοr=function(){alert("error!")};  img.src="http://www.abaonet.com/img.gif";  function show(){alert("body is loaded");};  window.οnlοad=show;

  

      运行上面的代码后,在不同的浏览器中进行测试,发现 IE 和 FF 是有区别的,在 FF 中,img 对象的加载包含在 body 

的加载过程中,既是 img加载完之后,body 才算是加载完毕,触发 window.onload 事件。

      在 IE 中,img 对象的加载是不包含在 body 的加载过程之中的,body 加载完毕,window.onload 事件触发时,img

对象可能还未加载结束,img.onload事件会在 window.onload 之后触发。

      根据上面的问题,考虑到浏览器的兼容性和网页的加载时间,尽量不要在 Image 对象里放置过多的图片,否则在 FF 下

会影响网页的下载速度。当然如果你在 window.onload 之后,执行预加载函数,就不会有 FF 中的问题了。

      可以通过Image对象的complete 属性来检测图像是否加载完成(每个Image对象都有一个complete属性,当图像处于

装载过程中时,该属性值false,当发生了onload、onerror、onabort中任何一个事件后,则表示图像装载过程结束(不管成

没成功),此时complete属性为true)

var img = new Image();    img.src = oImg[0].src = this.src.replace(/small/,"big");    oDiv.style.display = "block";    img.complete ? oDiv.style.display = "none" : (oImg[0].onload = function() {oDiv.style.display = "none"})

注:

ie 火狐等大众浏览器均支持 Image对象的onload事件。

ie8及以下、opera 不支持onerror事件

 

使用数组载入多个图像 

在实际应用中,我们可能需要预载入多个图像,而不止一个;例如,在一个包含多个图像翻卷的菜单栏中,或者在我们试图创建平滑效果时,都需要预载入多个图像。其实这并不困难,只要使用 JavaScript 的数组即可实现,如下例所示: 

 

在上面的例子中,我们定义一个变量 i和一个 Image() 对象 imageObj。然后定义了一个新数组 images[],每个数组元素存储要被预载入的图像。最后,创建一个 for() 循环来处理整个数组,并将每个元素赋给 Image() 对象,这样将其载入到缓存中。 

onLoad() 事件处理器 
像很多 JavaScript 的其它对象一样,Image() 对象也有一些事件处理器。其中最有用的一个肯定是 onLoad() 处理器,它在图像完全载入之后调用。这个事件处理器可以与一个自定义函数联系起来,以在图像完全载入之后执行一些特定的任务。下面的例子说明了这一点,在这个例子中,首先在图像载入时显示一个“please wait”屏幕,然后在载入完成时将浏览器转到一个新的 URL。 

     Please wait, loading images...  

  当然,你还可以创建一个图像数组然后在其上进行循环操作,预载入每个图像,然后在每一阶段跟踪被载入图像的数目。一旦所有图像载入完毕,根据事件处理器的程序逻辑,它就可以将浏览器带入下一个页面(或者执行其它任务)。 

 

 

转载于:https://www.cnblogs.com/huhl/p/3934631.html

你可能感兴趣的文章
windows平台下node,npm,gulp配置
查看>>
《C#并行编程高级教程》第5章 协调数据结构 笔记
查看>>
android开发 NDK 编译和使用静态库、动态库 (转)
查看>>
数学之美
查看>>
Android sd卡状态监听,文件搜索,媒体文件刷新
查看>>
[翻译]ASP.NET MVC4新特性之脚本压缩和合并
查看>>
UWP: 掌握编译型绑定 x:Bind
查看>>
3、使用字符串
查看>>
MongoDB之Array Object的特殊操作
查看>>
MySQL中的共享锁
查看>>
android sqlite数据库封装 实现crud
查看>>
Part 3:视图和模板--Django从入门到精通系列教程
查看>>
C++纯虚函数调用
查看>>
Django之ModelForm组件
查看>>
Logger级别和输出的地方
查看>>
转:复杂网络分析总结
查看>>
用关键字做表名和字段时,如何删除
查看>>
MSDN上面测试Window的方法(很好用)
查看>>
HTML页面打印分页标签样式
查看>>
Le Chapitre VII
查看>>