<?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>三水清Image</title>
	<atom:link href="http://js8.in/tag/image/feed" rel="self" type="application/rss+xml" />
	<link>http://js8.in</link>
	<description>专注前端开发,分享Javascript/CSS/PHP等Web前端开发技巧</description>
	<lastBuildDate>Sat, 21 Apr 2012 02:50:09 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.6</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>IE中Image.onload失效的问题</title>
		<link>http://js8.in/501.html</link>
		<comments>http://js8.in/501.html#comments</comments>
		<pubDate>Tue, 09 Mar 2010 00:43:02 +0000</pubDate>
		<dc:creator>三水清</dc:creator>
				<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[网络技术]]></category>
		<category><![CDATA[Image]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[jquery]]></category>

		<guid isPermaLink="false">http://www.js8.in/?p=501</guid>
		<description><![CDATA[为了方便加载速度，我使用了new Iamge的对象方法来预加载图片，可是到了IE下进行调试总是不会触发onload事件，不管是IE8、IE7还是万恶的IE6，都不会触发onload事件，我很迷惑，后来在google上找到了解决的方法<table class="wumii-related-items" cellspacing="0" cellpadding="3" border="0"  style="clear: both;">
    
    <tr>
        <td colspan="4"><b><font size="-1"  style="display: block !important; padding: 20px 0 5px !important;">猜你喜欢：</font></b></td>
    </tr>
    
        <tr>
                <td width="102" valign="top" style="padding: 5px !important; margin: 0 !important;">
                    <a target="_blank" title="jQuery教程之鼠标事件篇" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect?url=http%3A%2F%2Fjs8.in%2F600.html&from=http%3A%2F%2Fjs8.in%2F501.html">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 96px !important; height: 96px !important;" src="http://static.wumii.com/site_images/2011/11/17/10979601.jpg" width="96px" height="96px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 102px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">jQuery教程之鼠标事件篇</font>
                    </a>
                </td>
                <td width="102" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="javascript在光标位置插入内容" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect?url=http%3A%2F%2Fjs8.in%2F538.html&from=http%3A%2F%2Fjs8.in%2F501.html">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 96px !important; height: 96px !important;" src="http://static.wumii.com/site_images/2011/11/17/10978940.jpg" width="96px" height="96px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 102px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">javascript在光标位置插入内容</font>
                    </a>
                </td>
                <td width="102" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="jQuery浏览器判断一个bug，以及修改建议" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect?url=http%3A%2F%2Fjs8.in%2F337.html&from=http%3A%2F%2Fjs8.in%2F501.html">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 96px !important; height: 96px !important;" src="http://static.wumii.com/site_images/2011/11/18/11026214.png" width="96px" height="96px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 102px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">jQuery浏览器判断一个bug，以及修改建议</font>
                    </a>
                </td>
                <td width="102" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="jQuery选择器使用详解" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect?url=http%3A%2F%2Fjs8.in%2F416.html&from=http%3A%2F%2Fjs8.in%2F501.html">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 96px !important; height: 96px !important;" src="http://static.wumii.com/site_images/2011/11/17/10977318.gif" width="96px" height="96px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 102px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">jQuery选择器使用详解</font>
                    </a>
                </td>
        </tr>
    
    <tr>
        <td colspan="4" align="right">
            <a style="text-decoration: none !important;" href="http://www.wumii.com/widget/relatedItems" target="_blank" title="无觅相关文章插件">
                <font size="-1" color="#bbbbbb" style="display: block !important; font-family: arial !important; padding: 5px 0 !important; font-size: 12px !important; color: #bbb !important;">无觅</font>
            </a>
        </td>
    </tr>
</table>]]></description>
			<content:encoded><![CDATA[<p>最近在做wBox开发中，需要做一个图片的幻灯片效果，为了方便加载速度，我使用了<strong>new Iamge</strong>的对象方法来<strong>预加载图片</strong>，当图片onLoad就运行一个函数来计算图片的大小尺寸，进行<a title="jQuery easing动画效果扩展" href="http://js8.in/451.html" target="_blank">jQuery动画</a>，以及切换图片src，在firefox下开发完成后，可是到了IE下进行调试总是不会触发<strong>onload</strong>事件，不管是IE8、IE7还是万恶的IE6，都不会触发onload事件，我很迷惑，后来在google上找到了<strong>解决</strong>的方法：一下为引用部分</p>
<p>最初的代码如下：</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> img <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> Image<span style="color: #339933;">;</span>
img.<span style="color: #660066;">src</span> <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;test.gif&quot;</span><span style="color: #339933;">;</span>
img.<span style="color: #000066;">onload</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
    <span style="color: #000066;">alert</span> <span style="color: #009900;">&#40;</span> img.<span style="color: #660066;">width</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span></pre></div></div>

<p>这段代码看着没什么问题，但是为什么onload没有被IE调用呢？因为IE会缓存图片，第2次加载的图片，不是从服务器上传过来的，而是从缓冲区里加载的。是不是从缓冲区里加载的图片就不触发onload事件呢？我于是我测试了以下代码，成功了～</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> img <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> Image<span style="color: #339933;">;</span>
img.<span style="color: #000066;">onload</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
    <span style="color: #000066;">alert</span> <span style="color: #009900;">&#40;</span> img.<span style="color: #660066;">width</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
img.<span style="color: #660066;">src</span> <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;test.gif&quot;</span><span style="color: #339933;">;</span></pre></div></div>

<p>我把onload写到前面去，先告诉浏览器如何处理这张图片，再指定这张图片的源，这样就正常了。所以，不是IE没有触发onload事件，而是因为加载缓冲区的速度太快，以至于没有运行到img.onload的时候，onload事件已经触发了。这让我想到了Ajax，我们在写xmlhttp的时候，都是先指定onstatechange的回调函数，然后再send数据的，道理是一样的。
<div class="copyright">
<strong>声明：</strong>文章未声明为原创文章，本文链接 <a href="http://js8.in/501.html" title="IE中Image.onload失效的问题">http://js8.in/501.html</a>. 转载请注明转自<a href="http://js8.in" title="前端开发博客"> JS8.IN ™</a></span></span></div>
<h3 class="box-title">随机文章</h3>
<ul class="box_random">
<li><a href="http://js8.in/569.html" title="IE中多帧GIF可以触发多次Image().load事件" rel="bookmark inlinks">IE中多帧GIF可以触发多次Image().load事件</a></li>
<li><a href="http://js8.in/551.html" title="一款模仿Mac的windows7主题包" rel="bookmark inlinks">一款模仿Mac的windows7主题包</a></li>
<li><a href="http://js8.in/495.html" title="爱墙 许愿墙 祝福墙程序免费下载" rel="bookmark inlinks">爱墙 许愿墙 祝福墙程序免费下载</a></li>
<li><a href="http://js8.in/441.html" title="使用滔滔给WordPress添加博主状态" rel="bookmark inlinks">使用滔滔给WordPress添加博主状态</a></li>
<li><a href="http://js8.in/688.html" title="使用windows7的virtual PC打造原装IE6、IE7、IE8测试环境" rel="bookmark inlinks">使用windows7的virtual PC打造原装IE6、IE7、IE8测试环境</a></li>
<li><a href="http://js8.in/934.html" title="javascript contains方法来判断元素包含关系" rel="bookmark inlinks">javascript contains方法来判断元素包含关系</a></li>
<li><a href="http://js8.in/407.html" title="使用ZeroClipboard解决跨浏览器复制到剪贴板的问题" rel="bookmark inlinks">使用ZeroClipboard解决跨浏览器复制到剪贴板的问题</a></li>
<li><a href="http://js8.in/570.html" title="十枚腾讯微博内测邀请的种子" rel="bookmark inlinks">十枚腾讯微博内测邀请的种子</a></li>
</ul>
<p style="margin:0;padding:0;height:1px;overflow:hidden;">
    <script type="text/javascript"><!--
        var wumiiSitePrefix = "http://js8.in";
        var wumiiEnableCustomPos = false;
        var wumiiParams = "&#038;num=4&#038;mode=3&#038;displayInFeed=1&#038;version=1.0.5.5&#038;pf=WordPress2.8.6";
    //--></script></p>
<hr />
<p><small>© 三水清 for <a href="http://js8.in">三水清</a>, 2010. |
<a href="http://js8.in/501.html#comments">3 comments</a> |在微博关注我：<a href="//weibo.com/sanshuiqing" target="_blank" title="关注断桥残雪的新浪微博">@清-三水清</a>
<br/>收藏到：
<a rel="nofollow" href="http://share.renren.com/share/buttonshare.do?link=%posturl%&title=%posttitle%" title="收藏本文到人人网" target="_blank">人人网</a> | <a rel="nofollow" href="http://www.douban.com/recommend/?url=%posturl%&title=%posttitle%" title="收藏本文到豆瓣" target="_blank">豆瓣</a> | <a rel="nofollow" href="http://www.kaixin001.com/repaste/share.php?rtitle=%posttitle%&rurl=%posturl%" title="收藏本文到开心网" target="_blank">开心网</a> | <a rel="nofollow" href="http://shuqian.qq.com/post?title=%posttitle%&%20uri=%posturl%" title="收藏本文到QQ书签" target="_blank">QQ书签</a> | <a rel="nofollow" href="http://v.t.sina.com.cn/share/share.php?url=%posturl%&title=%posttitle%" title="收藏本文到新浪微博" target="_blank">新浪微博</a> | <a rel="nofollow" href="http://v.t.qq.com/share/share.php?title=%posttitle%&url=%posturl%&site=http://www.kaixin100.info" title="收藏本文到腾讯微博" target="_blank">腾讯微博</a>
<br/>
Post tags: <a href="http://js8.in/tag/image" rel="tag">Image</a>, <a href="http://js8.in/tag/javascript" rel="tag">javascript</a>, <a href="http://js8.in/tag/jquery" rel="tag">jquery</a><br/>
</small></p><table class="wumii-related-items" cellspacing="0" cellpadding="3" border="0"  style="clear: both;">
    
    <tr>
        <td colspan="4"><b><font size="-1"  style="display: block !important; padding: 20px 0 5px !important;">猜你喜欢：</font></b></td>
    </tr>
    
        <tr>
                <td width="102" valign="top" style="padding: 5px !important; margin: 0 !important;">
                    <a target="_blank" title="jQuery教程之鼠标事件篇" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect?url=http%3A%2F%2Fjs8.in%2F600.html&from=http%3A%2F%2Fjs8.in%2F501.html">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 96px !important; height: 96px !important;" src="http://static.wumii.com/site_images/2011/11/17/10979601.jpg" width="96px" height="96px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 102px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">jQuery教程之鼠标事件篇</font>
                    </a>
                </td>
                <td width="102" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="javascript在光标位置插入内容" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect?url=http%3A%2F%2Fjs8.in%2F538.html&from=http%3A%2F%2Fjs8.in%2F501.html">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 96px !important; height: 96px !important;" src="http://static.wumii.com/site_images/2011/11/17/10978940.jpg" width="96px" height="96px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 102px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">javascript在光标位置插入内容</font>
                    </a>
                </td>
                <td width="102" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="jQuery浏览器判断一个bug，以及修改建议" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect?url=http%3A%2F%2Fjs8.in%2F337.html&from=http%3A%2F%2Fjs8.in%2F501.html">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 96px !important; height: 96px !important;" src="http://static.wumii.com/site_images/2011/11/18/11026214.png" width="96px" height="96px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 102px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">jQuery浏览器判断一个bug，以及修改建议</font>
                    </a>
                </td>
                <td width="102" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="jQuery选择器使用详解" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect?url=http%3A%2F%2Fjs8.in%2F416.html&from=http%3A%2F%2Fjs8.in%2F501.html">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 96px !important; height: 96px !important;" src="http://static.wumii.com/site_images/2011/11/17/10977318.gif" width="96px" height="96px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 102px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">jQuery选择器使用详解</font>
                    </a>
                </td>
        </tr>
    
    <tr>
        <td colspan="4" align="right">
            <a style="text-decoration: none !important;" href="http://www.wumii.com/widget/relatedItems" target="_blank" title="无觅相关文章插件">
                <font size="-1" color="#bbbbbb" style="display: block !important; font-family: arial !important; padding: 5px 0 !important; font-size: 12px !important; color: #bbb !important;">无觅</font>
            </a>
        </td>
    </tr>
</table>]]></content:encoded>
			<wfw:commentRss>http://js8.in/501.html/feed</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
	</channel>
</rss>

