嘿, 我是Mofei!
预加载和javascript Image()对象
发布于 2012年9月23日 01:12

首先是Image()对象的使用,直接贴代码

function preloader() 
{
heavyImage = new Image(); 
heavyImage.src = "heavyimagefile.jpg";
}

以下代码预先加载了heavyimgefile.jpg,当在onMouseOver的时候就不会出现等待的情况。 如果想一次预加载很多张图片可以用以下的代码

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];
 }

}

然后是很实用的,经常会遇到在图片加载完成之前提示图片加载中,然后图片加载好了再显示图片,这里给出demo

// create an image object
objImage = new Image();

// set what happens once the image has loaded objImage.onLoad=imagesLoaded();

// preload the image file
objImage.src='images/image1n.gif';

// function invoked on image load
function imagesLoaded()
{    
 document.location.href='index2.html';
}

Please wait, loading images...

应该很好理解的,上面的例子,先创建Image()对象,然后预加载,通过objImage.onload这个来实现图片加载完成之后执行某些方法之类的。

贴出英文原文的出处,有兴趣的话可以自己过去看看,写的很不错 http://www.techrepublic.com/article/preloading-and-the-javascript-image-object/5214317

📱 喜欢这篇文章?关注我的公众号

博客文章会第一时间发布,然后按类型同步到对应公众号

👨‍👩‍👧‍👦生活公众号

疯狂的超级奶爸在北欧

家庭生活 • 育儿日常 • 北欧生活

生活公众号二维码

🏠 芬兰生活分享

👨‍💻技术公众号

Mofie

前端开发 • AI技术 • 编程经验

技术公众号二维码

🚀 技术灵感与实战

THE END
上一篇
“登陆网站”还是“登录网站”
下一篇
小心 -webkit-text-size-adjust:none![译]

更多精彩文章

如果觉得文章有值得讨论的地方,欢迎留言和我交流!

avatar

Mofei's Friend (点击编辑)

嘿,说句话呗!
还没有评论
成为第一个评论的人吧!

HI. I AM MOFEI!

NICE TO MEET YOU!