js利用Image()对象实现图片预加载

为了能更快的对此文件进行预装载,我们简单的创建了一个名为heavyImage的新Image() 对象,然后将其通过onLoad()事件句柄同步装载到页面上。

 代码如下 复制代码

<html>
<head>
<script language = "JavaScript">
function preloader()
{
     heavyImage = new Image();
     heavyImage.src = "heavyimagefile.jpg";
}
</script>
</head>
<body onLoad="javascript:preloader()">
<a href="#" onMouseOver="javascript:document.img01.src='heavyimagefile.jpg'">
<img name="img01" src="justanotherfile.jpg"></a>
</body>
</html>

注意,图片的标签(tag)本身并不处理onMouseOver()以及onMouseOut()事件,这也正是上面示例中的<img>标签被包括在<a>标签中的原因。标签<a>则包括了对这些事件类型的支持。

通过数组(arrays)装载多个图片

在实际情况中,你很有可能需要预装载不止一张的图片;比如,对于包括多个图片的菜单条,或者希望实现平滑的动画效果。要实现这些并不困难,只需要利用JavaScript的数组,如下例所示:

 

 代码如下 复制代码
<script language="JavaScript">
function preloader()
{
     // counter
     var i = 0;
     // create object
     imageObj = new Image();
     // set image list
     images = new Array();
     images[0]="image1.jpg"
     images[1]="image2.jpg"
     images[2]="image3.jpg"
     images[3]="image4.jpg"
     // start preloading
     for(i=0; i<=3; i++)
     {
          imageObj.src=images[i];
     }
}
</script>

在上面的例子中,定义了变量i以及名为imageObj的Image()对象。然后定义了新数组images[],每一个数组元素将存储需要预装载图片的地址来源

时间: 2024-10-06 19:45:34

js利用Image()对象实现图片预加载的相关文章

利用CSS、JavaScript及Ajax实现图片预加载的方法_javascript技巧

预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布,也可帮助用户在浏览你网站内容时获得更好的用户体验.本文将分享三个不同的预加载技术,来增强网站的性能与可用性. 实现图片预加载可以使用css.JavaScript.Ajax三种方法.下面分别介绍这些方法的实现. 使用CSS 单纯的使用css可以将图片加载到页面元素的背景上,这种方法简单.高效: #d

利用CSS、JavaScript及Ajax实现高效的图片预加载_javascript技巧

方法一:用CSS和JavaScript实现预加载 实现预加载图片有很多方法,包括使用CSS.JavaScript及两者的各种组合.这些技术可根据不同设计场景设计出相应的解决方案,十分高效. 单纯使用CSS,可容易.高效地预加载图片,代码如下: 复制代码 代码如下: #preload-01 { background: url(yun_qi_img/image-01.png) no-repeat -9999px -9999px; } #preload-02 { background: url(yun

多种js图片预加载实现方式分享_javascript技巧

图片预加载有大体有几种方式  1.html标签或css加载图片 显而易见我们使用img标签或者通过标签的background-image属性都可以实现图片的预加载.但是为了避免初次载入过多图片影响体验.一般最好在文档渲染完成以后再加载(使用window.onload等).  2.纯js实现预加载 空城计-Code记的Javascript实现图片的预加载的完整实现的预加载实例为 function preloadimages(arr){ var newimages=[], loadedimages=

JS实现图片预加载无需等待_javascript技巧

网站开发时经常需要在某个页面需要实现对大量图片的浏览,如果考虑流量的话,大可以像pconline一样每个页面只显示一张图片,让用户每看一张图片就需要重新下载一下整个页面.不过,在web2.0时代,更多人愿意用javascript来实现一个图片浏览器,让用户无需等待过长的时间就能看到其他图片. 知道了一张图片的地址,需要把它在一个固定大小的html容器(可以是div等)里边显示出来,最重要的当然是需要知道这张即将显示的图片的宽和高,然后再结合容器的宽和高,按照一定的缩放比例使图片显示出来.因此,实

js图片预加载示例_基础知识

js图片预加载简单示例 复制代码 代码如下: function loadImage(url, callback) {    if(url!='null') {        var img = new Image();        img.src = url;        if(img.complete) {            callback(img);        } else {            img.onload = function(){               

二款 js 图片预加载进度条(Mootools)

提供二款图片预加载进度条效果代码,可以对网站图片加载过慢时进行提供,这样可以增加用户体验哦,我们利用了一款js与mootools实例代码. <script> var l=0; var imgs; var sum=0; function chk(){   document.getelementbyid("aa").innertext=""+((sum-l)*100/sum)+"%"   l--;   if (l==0){     for

JS图片预加载 JS实现图片预加载应用_javascript技巧

复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

图片预加载并且自动等比例缩放的JS插件

/* **************图片预加载插件****************** ///作者:没剑(2008-06-23) ///http://regedit.cnblogs.com ///说明:在图片加载前显示一个加载标志,当图片下载完毕后显示图片出来 可对图片进行是否自动缩放功能 此插件使用时可让页面先加载,而图片后加载的方式, 解决了平时使用时要在图片显示出来后才能进行缩放时撑大布局的问题 ///参数设置: scaling 是否等比例自动缩放 width 图片最大高 height 图片

理解Javascript图片预加载_javascript技巧

预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布,也可帮助用户在浏览你网站内容时获得更好的用户体验.本文将分享三个不同的预加载技术,来增强网站的性能与可用性. 方法一:用CSS和JavaScript实现预加载 实现预加载图片有很多方法,包括使用CSS.JavaScript及两者的各种组合.这些技术可根据不同设计场景设计出相应的解决方案,十分高效.