📄 day4_4.html
字号:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312-80">
<style type="text/css">
<!--
a:link { color: blue; text-decoration: none}
a:visited { color: purple; text-decoration: none}
a:hover { color: #CC0033; text-decoration: underline}
-->
</style>
<title>JavaScript高级教程</title>
<script language="JavaScript">
<!-- hide me
// timedAlert
// this just calls a
function timedAlert()
{
var the_timeout = setTimeout("alertAndRedirect();", 3000);
}
function alertAndRedirect()
{
alert('OK! Exhale!');
window.location.replace("day3_2.html");
}
// show me -->
</script>
</head>
<body topmargin="1" leftmargin="2">
<table border="0" width="591" cellspacing="0">
<tr>
<td bgcolor="#ffff99" width="451">JavaScript高级教程 - 第四课</td>
</tr>
<tr>
<td bgcolor="#FF6600" width="451"><a href="mailto:thau@wired.com">Thau</a></td>
</tr>
</table>
<div align="left">
<table border="0" width="630" cellspacing="0">
<tr>
<td width="458" valign="top" align="left" rowspan="2"><small><small><br>
</small></small><strong>第四页：<font size="3">预装图象 - 怎么做?<br>
</font></strong>
<table width="451">
<tr>
<td width="447"><font size="3">预装入图象其实并不困难。你要做的就是创建一个新的<font face="verdana, arial">image</font><br>
对象，然后把要预装的图象名设定成<font face="verdana, arial">image</font>的<font face="verdana, arial">src</font>属性，如下<br>
所示：<font face="verdana, arial">
<blockquote>
<pre>var an_image = new Image();
an_image.src = "my_nice_image.gif";</pre>
</blockquote>
</font>
<p><font face="verdana, arial"></font>通过设置<font face="verdana, arial">image</font>的<font face="verdana, arial">src</font>属性就可以自动地把图象下载到你的硬<br>
盘里（当然假设你的<font face="verdana, arial">cache</font>可以用），然后图象变换时就从<br>
硬盘直接读入图象而不用再去下载了。 </p>
<p> <font face="verdana, arial"></font>试着把鼠标放在下面的几个链接上，图象变换应该相当快捷<br>
和令人满意的。</p>
<p> <font face="verdana, arial"></font><img src="mattmarg.jpg" name="image_one" WIDTH="101" HEIGHT="133"><br>
<font face="verdana, arial"><a href="#" onMouseOver="image_one.src='kwmatt.jpg';">1...</a><br>
<a href="#" onMouseOver="image_one.src='matbon.jpg';">2...</a><br>
<a href="#" onMouseOver="image_one.src='lunchMat.jpg';">3...</a></font></p>
</font>
<p><font size="3"> <font face="verdana, arial"></font>剩下要做的唯一一件事就是，怎样在页面被下载以后和图象<br>
变换操作之前使预装图象发生。让人愉快的是这很简单。<font face="verdana, arial">HTML</font><br>
中的<font face="verdana, arial">body</font>标记有一个事件处理器叫</font><font face="verdana, arial" size="3"><tt>onLoad</tt></font><font size="3">，当页面被调入后<br>
它将被调用。如果你的<font face="verdana, arial">body</font>标记是这样的：</font></p>
<font size="3">
<blockquote>
<pre>
<font face="verdana, arial"></font>
<font face="verdana, arial"><body onLoad="doPreload();">
</font></pre>
</blockquote>
<p> <font face="verdana, arial"></font>那么<font face="verdana, arial"><tt>doPreload()</tt></font>函数将在网页下载后被调用。函数的代码是<br>
这样的：
</font></td>
</tr>
</table>
<blockquote>
<pre><big>
</big>function doPreload()
{
var the_images = new Array('kwmatt.jpg','matbon.jpg','lunchMat.jpg');
preloadImages(the_images);
}
function preloadImages(the_images_array) {
for(loop = 0; loop < the_images_array.length; loop++)
{
var an_image = new Image();
an_image.src = the_images_array[loop];
}
}</pre>
</blockquote>
<table width="466">
<tr>
<td width="462"><tt><font face="verdana, arial" size="3">doPreload()</font></tt><font size="3">函数创建了需要预装的图象名的数组，并把数组<br>
作为参数传送到<font face="verdana, arial"><tt>preloadImages()</tt></font>函数<font face="verdana, arial">,
<tt>preloadImages()</tt></font>函数包<br>
含了一个循环，每次循环都创建一个新的图象对象，并把图象<br>
名设到它的<font face="verdana, arial">src</font>属性中。
<p><font face="verdana, arial"></font>不很难吧？图象对象相当有用对吧？我很高兴你这样想，休息<br>
一会儿，马上我们就要进入一个更令人兴奋，更让人动脑筋的<br>
话题：创建你自己的对象。<a href="day4_5.html">>></a>
</font></td>
</tr>
</table>
<p align="left"><font face="宋体" size="3" color="#000000"><strong>JavaScript高级教程</strong></font><font color="#FF0000" face="宋体" size="3"><br>
</font><font size="3"><font color="#FF3300">第一页</font> <a href="day4_1.html"><font face="verdana, arial, geneva, sans-serif">JavaScript</font>高级教程<font face="verdana, arial, geneva, sans-serif">-
</font>第<font face="verdana, arial, geneva, sans-serif">4</font>天</a>
<br>
<font color="#FF3300">第二页 </font><a href="day4_2.html">图象映射与<font face="verdana, arial, geneva, sans-serif">JavaScript</font></a><font face="verdana, arial, geneva, sans-serif"><br>
</font><font color="#FF3300">第三页 </font><a href="day4_3.html">预装图象 -
是什么<font face="verdana, arial, geneva, sans-serif">?</font></a><font face="verdana, arial, geneva, sans-serif"><br>
</font><font color="#FF3300">第四页 </font>预装图象 - 怎么做?<font face="verdana, arial, geneva, sans-serif"><br>
</font><font color="#FF3300">第五页 </font><a href="day4_5.html">对象的优点</a><br>
<font color="#FF3300">第六页 </font><a href="day4_6.html">创建你自己的对象</a><br>
<font color="#FF3300">第七页 </font><a href="day4_7.html">你的面向对象的虚拟宠物</a><br>
<font color="#FF3300">第八页 </font><a href="day4_8.html">计算字符串</a><br>
<font color="#FF3300">第九页 </font><a href="day4_9.html">获取难以索引的对象</a><br>
<font color="#FF3300">第十页 </font><a href="day4_10.html">另一种获取难以索引的对象的手段</a><br>
<font color="#FF3300">第十一页 </font><a href="day4_11.html">第四天课程复习</a></font></p>
<p>[<a href="day1_1.html">第1课</a>][<a href="day2_1.html">第2课</a>][<a href="day3_1.html">第3课</a>][第4课][<a href="day5_1.html">第5课</a>]</p>
<hr align="left">
<!--webbot bot="Include" U-Include="../../copyright.html" TAG="BODY" startspan -->
<p><font face="verdana, arial, geneva, sans-serif" size="2"><a href="http://phtshop.yeah.net" target="_top">本文根据
网猴 相关文章改编，版权归原作者所有。</a> </font><font color="#000000"><span class="smallfont"></span></font></p>
<!--webbot bot="Include" endspan i-checksum="15926" --> </td>
</tr>
<tr> </tr>
</table>
</div>
</body>
</html>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -