<?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>Wed, 08 Feb 2012 11:59:56 +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="javascript在光标位置插入内容" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?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="jQuery1.4浏览器判断函数bug仍然存在" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fjs8.in%2F413.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/10979293.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;">jQuery1.4浏览器判断函数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.htm?url=http%3A%2F%2Fjs8.in%2F498.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/10980246.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="7个JavaScript在IE和Firefox浏览器下的差异写法" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fjs8.in%2F426.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/10990016.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;">7个JavaScript在IE和Firefox浏览器下的差异写法</font>
                    </a>
                </td>
        </tr>
    
    <tr>
        <td colspan="4" align="right">
            <a style="text-decoration: none !important;" href="http://www.wumii.com/widget/relatedItems.htm" 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/697.html" title="json_encode数组出现unicode \uxxxx的解决方案" rel="bookmark inlinks">json_encode数组出现unicode \uxxxx的解决方案</a></li>
<li><a href="http://js8.in/526.html" title="Ubuntu安装Samba实现跟windows文件共享" rel="bookmark inlinks">Ubuntu安装Samba实现跟windows文件共享</a></li>
<li><a href="http://js8.in/706.html" title="IE6中a标签location.href失效解决方法" rel="bookmark inlinks">IE6中a标签location.href失效解决方法</a></li>
<li><a href="http://js8.in/745.html" title="javascript的词法作用域" rel="bookmark inlinks">javascript的词法作用域</a></li>
<li><a href="http://js8.in/502.html" title="jQuery插件--wBox发布" rel="bookmark inlinks">jQuery插件&#8211;wBox发布</a></li>
<li><a href="http://js8.in/561.html" title="推荐一款支持win7的超酷3D水纹屏保-Watery Desktop" rel="bookmark inlinks">推荐一款支持win7的超酷3D水纹屏保-Watery Desktop</a></li>
<li><a href="http://js8.in/555.html" title="Img,Script,Link等标签为空可导致页面多余请求" rel="bookmark inlinks">Img,Script,Link等标签为空可导致页面多余请求</a></li>
<li><a href="http://js8.in/450.html" title="jQuery1.4正式版新功能及性能测试" rel="bookmark inlinks">jQuery1.4正式版新功能及性能测试</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="javascript在光标位置插入内容" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?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="jQuery1.4浏览器判断函数bug仍然存在" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fjs8.in%2F413.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/10979293.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;">jQuery1.4浏览器判断函数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.htm?url=http%3A%2F%2Fjs8.in%2F498.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/10980246.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="7个JavaScript在IE和Firefox浏览器下的差异写法" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fjs8.in%2F426.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/10990016.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;">7个JavaScript在IE和Firefox浏览器下的差异写法</font>
                    </a>
                </td>
        </tr>
    
    <tr>
        <td colspan="4" align="right">
            <a style="text-decoration: none !important;" href="http://www.wumii.com/widget/relatedItems.htm" 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>

