预载入和JavaScript Image()对象

最新推荐文章于 2024-04-22 15:28:53 发布

lidengw08

最新推荐文章于 2024-04-22 15:28:53 发布

阅读量446

点赞数

分类专栏： javascript/jquery 文章标签： image javascript input function 浏览器 url

javascript/jquery 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

很多high-res图像真的能够使 Web 站点更加整洁。但是他们也会使站点的访问速度变慢——图像是文档，文档使用带宽，带宽直接和等待时间相关。是该了解如何通过一个叫做图像预载入（preloading）的技巧来提高 Web 站点的访问速度的时候了。

图像预载入

对于浏览器载入图像来说，只有在对图像发送一个 HTTP请求之后，他们才会被浏览器载入，对图像的 HTTP 请求要么使用＜img＞标记，要么通过方法调用实现。假如使用 Javascrīpt 脚本来处理在 mouseover事件时交换图像，或在一段时间之后自动更改图像，那么在从服务器获取图像时可能要等上几秒钟到几分钟的时间。假如使用一个慢速的 Internet连接，或要获取的图像很大，或其他一些情况，这种现象就特别明显；这样，延迟就造成您不能达到自己期望的效果。

一些浏览器采用一些措施来缓解这一问题，比如试图通过在本地缓存中存储图像，从而使随后对图像的调用能够立即被满足；但是在图像第一次被调用时依然会存在一些延迟。预载入是在需要图像之前将其下载到缓存的一种方法。通过这一措施，当真正需要图像时，他就能够被立即从缓存中取出，从而能够立即显示。

Image() 对象

网页中的图像均会被自动看作图像对象，并依顺序，分别表示为document.images[0]，document.images[1]..., 预载入图像最简单的方法是在 Javascrīpt 中实例化一个新 Image() 对象，然后将需要载入的图像的 URL作为参数传入。

建立图像对象：
格式：

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

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

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

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

使用数组载入多个图像

在实际应用中，我们可能需要预载入多个图像，而不止一个；例如，在一个包含多个图像翻卷的菜单栏中，或在我们试图创建平滑效果时，都需要预载入多个图像。其实这并不困难，只要使用 Javascrīpt 的数组即可实现，如下例所示：
<scrīpt language="Javascrīpt">
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];
}
}
</scrīpt>

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

案例：

<!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="Content-Type" content="text/html; charset=utf-8" />

<script language="javascript" type="text/javascript">
function preloadimg(url,obj,ipt){
var img=new Image();
obj.innerHTML="<p>图片加载中...</p>";
img.οnlοad=function(){obj.innerHTML="";obj.style.width=String(img.width)+"px";ipt.style.width=String(img.width-40)+"px";obj.appendChild(img);};
img.οnerrοr=function(){obj.innerHTML="图片加载错误，请检查网络或URL地址！"};
img.src=url; //img.src一定要写在img.onload之后，否则在IE中会出现问题
}
function show(){
var div=document.getElementsByTagName("div")[0];
var input=document.getElementsByTagName("input");
preloadimg("http://book.csdn.net/smallimg/csdbblo2.gif",div,input[0]);
input[0].οnclick=function(){this.value=""};
input[1].οnclick=function(){preloadimg(input[0].value,div,input[0]);}
}
window.οnlοad=show;
</script>
<title>JavaScript获取图片大小——wxwdesign.cn</title>
</head>

<body>
<div></div>
<br />
<input type="text" value="请输入图片URL地址" class="ipt1"/><input type="button" value="加载" class="ipt2"/>
</body>
</html>

lidengw08

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
预载入和JavaScript Image()对象

很多high-res图像真的能够使 Web 站点更加整洁。但是他们也会使站点的访问速度变慢——图像是文档，文档使用带宽，带宽直接和等待时间相关。是该了解如何通过一个叫做图像预载入（preloading）的技巧来提高 Web 站点的访问速度的时候了。图像预载入对于浏览器载入图像来说，只有在对图像发送一个 HTTP请求之后，他们才会被浏览器载入，对图像的 HTTP 请求要么使用＜im
复制链接

扫一扫