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

更新时间:2017-12-07    来源:js教程    手机版     字体:

【www.bbyears.com--js教程】

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

 代码如下



<script language = "JavaScript">
function preloader()
{
     heavyImage = new Image();
     heavyImage.src = "heavyimagefile.jpg";
}
</script>





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

通过数组(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[],每一个数组元素将存储需要预装载图片的地址来源

本文来源:http://www.bbyears.com/wangyezhizuo/37597.html

猜你感兴趣

热门标签

更多>>

本类排行