<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Keep on Fighting! &#187; window.onload</title>
	<atom:link href="http://yihui.name/cn/tag/windowonload/feed/" rel="self" type="application/rss+xml" />
	<link>http://yihui.name/cn</link>
	<description>谢益辉</description>
	<lastBuildDate>Mon, 06 Sep 2010 07:59:12 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0.1</generator>
		<item>
		<title>速度的最终解决方案：不要用JavaScript调用任何与URL有关的对象</title>
		<link>http://yihui.name/cn/2007/10/dont-call-url-with-javascript/</link>
		<comments>http://yihui.name/cn/2007/10/dont-call-url-with-javascript/#comments</comments>
		<pubDate>Sat, 13 Oct 2007 15:21:25 +0000</pubDate>
		<dc:creator>谢益辉</dc:creator>
				<category><![CDATA[网站和网页]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[DIV]]></category>
		<category><![CDATA[Firefox]]></category>
		<category><![CDATA[HTML]]></category>
		<category><![CDATA[Internet Explorer]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[window.onload]]></category>
		<category><![CDATA[动画]]></category>

		<guid isPermaLink="false">http://yihui.name/cn/?p=50</guid>
		<description><![CDATA[了MSIE能利用自身的缓存，真是让我想破了头。好在到现在终于找到了一种解决办法，其实所有的技巧都在于：不要用JavaScript调用任何与URL有关的对象。既然不能用JavaScript动态改变页面内元素（比如图形&#60;img src=&#8230; /&#62;）的URL，那么，想要在页面内动态且快速显示图片的路基本上只剩下一条了，那就是CSS。基本原理是：利用JavaScript动态改变一个层（&#60;div id=&#8230;&#62;&#60;/div&#62;）的CSS属性，若想让它显示，则设置为*.style.display = &#8220;block&#8220;；否则，设置为*.style.display = &#8220;none&#8220;。通过对若干个层的依次显隐，一副动画就大功告成了。 当然，Firefox对这种办法也是支持的。至此，我才基本搞定了动画在网页上的显示方式——万里长征的第一步。 今天看JavaScript Reference顺便也了解到window.onload的作用，当一个页面在客户端加载完成之后这个函数就会被调用，因此可以事先在页面内放置一个“正在加载”的说明字样，等页面全都加载完毕了之后把这个说明隐去，并将动画的“开始”按钮设置为可用（disabled = false）。这样一个动画页面就完美了，吼吼。 依然参见：http://r.yihui.name/misc/java.htm（猛增速度，faster，直接把时间间隔减小到0秒，看看是什么效果） 外一篇：之前走了什么弯路 在此之前，我走的弯路太多了，现在综合起来也就一个特点：那些方法全都涉及到URL…… 比如设置图片的src属性（*.src = &#8230;） 比如设置表格的背景（*.setAttribute(&#8220;background&#8221;, &#8230;)） 比如设置对象的背景图像（*.style.backgroundImage = &#8220;url(&#8230;)&#8221;） 比如把一个对象的HTML代码（包含图片标签）赋给另一个对象（*.innerHTML = **.innerHTML） 等等 而对一个对象的显隐控制不会涉及到图片地址，只是单纯的显示或隐藏一个对象——实质上它一直都在这个页面里。 爷还想看：2007/10/10 -- 关于网页的小笔记：Firefox、IE和JavaScript (0)2007/09/08 -- 网页中的图片点击放大效果：Highslide和Lightbox (4)2007/09/06 -- 关于网页的小笔记：Firefox和IE、fieldset标签 (9)2008/06/07 -- 转义符：从R到JavaScript到HTML (0)2009/06/10 -- 用R语言和Flash以及JavaScript生成标签云 (7)]]></description>
			<content:encoded><![CDATA[<p><a href="http://yihui.name/cn/2007/10/dont-call-url-with-javascript/"><span class="dropcap-red">为</span></a>了MSIE能利用自身的缓存，真是让我想破了头。好在到现在终于找到了一种解决办法，其实所有的技巧都在于：<strong>不要用JavaScript调用任何与URL有关的对象</strong>。既然不能用JavaScript动态改变页面内元素（比如图形<span style="font-family: Bitstream Vera Sans Mono,courier new,monospace">&lt;img src=&#8230; /&gt;</span>）的URL，那么，想要在页面内<strong>动态</strong>且<strong>快速</strong>显示图片的路基本上只剩下一条了，那就是CSS。基本原理是：利用JavaScript动态改变一个层（<span style="font-family: Bitstream Vera Sans Mono,courier new,monospace">&lt;div id=&#8230;&gt;&lt;/div&gt;</span>）的CSS属性，若想让它显示，则设置为<span style="font-family: Bitstream Vera Sans Mono,courier new,monospace">*.style.display = &#8220;<strong>block</strong>&#8220;</span>；否则，设置为<span style="font-family: Bitstream Vera Sans Mono,courier new,monospace">*.style.display = &#8220;<strong>none</strong>&#8220;</span>。通过对若干个层的依次显隐，一副动画就大功告成了。</p>
<p>当然，Firefox对这种办法也是支持的。至此，我才基本搞定了动画在网页上的显示方式——万里长征的第一步。</p>
<p>今天看JavaScript Reference顺便也了解到<span style="font-family: Bitstream Vera Sans Mono,courier new,monospace">window.onload</span>的作用，当一个页面在客户端加载完成之后这个函数就会被调用，因此可以事先在页面内放置一个“正在加载”的说明字样，等页面全都加载完毕了之后把这个说明隐去，并将动画的“开始”按钮设置为可用（<span style="font-family: Bitstream Vera Sans Mono,courier new,monospace">disabled = false</span>）。这样一个动画页面就完美了，吼吼。</p>
<p>依然参见：<a href="http://r.yihui.name/misc/java.htm" target="_blank">http://r.yihui.name/misc/java.htm</a>（猛增速度，faster，直接把时间间隔减小到0秒，看看是什么效果）</p>
<div>外一篇：之前走了什么弯路</div>
<p>在此之前，我走的弯路太多了，现在综合起来也就一个特点：那些方法全都涉及到URL……</p>
<ol>
<li>比如设置图片的src属性（<span style="font-family: Bitstream Vera Sans Mono,courier new,monospace">*.src = &#8230;</span>）</li>
<li>比如设置表格的背景（<span style="font-family: Bitstream Vera Sans Mono,courier new,monospace">*.setAttribute(&#8220;background&#8221;, &#8230;)</span>）</li>
<li>比如设置对象的背景图像（<span style="font-family: Bitstream Vera Sans Mono,courier new,monospace">*.style.backgroundImage = &#8220;url(&#8230;)&#8221;</span>）</li>
<li>比如把一个对象的HTML代码（包含图片标签）赋给另一个对象（<span style="font-family: Bitstream Vera Sans Mono,courier new,monospace">*.innerHTML = **.innerHTML</span>）</li>
<li>等等</li>
</ol>
<p>而对一个对象的显隐控制不会涉及到图片地址，只是单纯的显示或隐藏一个对象——实质上它一直都在这个页面里。</p>
<h2  class="related_post_title">爷还想看：</h2><ul class="related_post"><li>2007/10/10 -- <a href="http://yihui.name/cn/2007/10/notes-on-firefox-ie-and-javascript/" title="关于网页的小笔记：Firefox、IE和JavaScript">关于网页的小笔记：Firefox、IE和JavaScript</a> (0)</li><li>2007/09/08 -- <a href="http://yihui.name/cn/2007/09/highslide-and-lightbox/" title="网页中的图片点击放大效果：Highslide和Lightbox">网页中的图片点击放大效果：Highslide和Lightbox</a> (4)</li><li>2007/09/06 -- <a href="http://yihui.name/cn/2007/09/notes-on-firefox-ie-and-fieldset/" title="关于网页的小笔记：Firefox和IE、fieldset标签">关于网页的小笔记：Firefox和IE、fieldset标签</a> (9)</li><li>2008/06/07 -- <a href="http://yihui.name/cn/2008/06/escape-operator-from-r-to-js-to-html/" title="转义符：从R到JavaScript到HTML">转义符：从R到JavaScript到HTML</a> (0)</li><li>2009/06/10 -- <a href="http://yihui.name/cn/2009/06/creating-tag-cloud-using-r-and-flash-javascript/" title="用R语言和Flash以及JavaScript生成标签云">用R语言和Flash以及JavaScript生成标签云</a> (7)</li></ul>]]></content:encoded>
			<wfw:commentRss>http://yihui.name/cn/2007/10/dont-call-url-with-javascript/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
	</channel>
</rss>
