<?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>╭╰Original　Colors╯╮ - 认真工作 &#187; 图片顺序载入</title>
	<atom:link href="http://www.iros.me/tag/%e5%9b%be%e7%89%87%e9%a1%ba%e5%ba%8f%e8%bd%bd%e5%85%a5/feed" rel="self" type="application/rss+xml" />
	<link>http://www.iros.me</link>
	<description>show the colorsssssss in my WORK</description>
	<lastBuildDate>Fri, 09 Sep 2011 06:29:08 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0.4</generator>
		<item>
		<title>inhabit.coptix.com 学习JS图片按指定顺序载入显示</title>
		<link>http://www.iros.me/inhabit-javascript-ordered-pics-show.html</link>
		<comments>http://www.iros.me/inhabit-javascript-ordered-pics-show.html#comments</comments>
		<pubDate>Tue, 02 Dec 2008 03:32:38 +0000</pubDate>
		<dc:creator>ponytail</dc:creator>
				<category><![CDATA[┨Dooooitmyself]]></category>
		<category><![CDATA[┨Java Script]]></category>
		<category><![CDATA[inhabit]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[图片顺序载入]]></category>

		<guid isPermaLink="false">http://www.originalcolors.cn/work/?p=279</guid>
		<description><![CDATA[很有意思的结构设计，底部的SPONSOR部分使用了TABLE结构，实现了小图片从左到右从上到下依次显示的效果（这个貌似只能在IE下看见~），顶部JS效果代码加在了这之后，等底部全部图片载入完成再回过头来实现顶部效果，一开始吸引我的就是这个啦， 这些小图是按顺序载入滴，并且是ORDER指定顺序！~ 于是研究了一下~~ 赶紧自己去 看看 吧~~ 也可以 看看 我学习来的例子~~ 学习要点： 页面代码的加载顺序一般是从上到下的，利用这个可以巧妙的将重要内容的代码位置前移，以达到最先显示出来的效果，同时，这个时候使用DIV来做框架的好处也会显现，因为它不像TABLE一样需要&#60;/table&#62;加载闭合后才开始显示内容，而是加载多少就实时显示多少，恩恩，以后肯定都用得到的，今天大收获，哈~ 标签：inhabit, Javascript, 图片顺序载入<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="96" valign="top" style="padding: 5px !important; margin: 0 !important;">
                    <a target="_blank" title="来体验一下Chrome Experiments，玩玩JS效果吧~" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.iros.me%2Fchrome-experiments-javascript.html&from=http%3A%2F%2Fwww.iros.me%2Finhabit-javascript-ordered-pics-show.html">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #B0BF32 !important; width: 90px !important; height: 90px !important;" src="http://static.wumii.com/site_images/2011/09/09/29586944.png" width="90px" height="90px" /><br />
                        <font size="-1" color="#666666" style="display: block !important; line-height: 15px !important; width: 96px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">来体验一下Chrome Experiments，玩玩JS效果吧~</font>
                    </a>
                </td>
                <td width="96" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #B0BF32 !important;">
                    <a target="_blank" title="Snowstorm 圣诞节快到了，给BLOG加点雪花效果吧~" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.iros.me%2Fsnowstorm-javascript-effect.html&from=http%3A%2F%2Fwww.iros.me%2Finhabit-javascript-ordered-pics-show.html">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #B0BF32 !important; width: 90px !important; height: 90px !important;" src="http://static.wumii.com/images/blogWidget/wordpress_default.gif" width="90px" height="90px" /><br />
                        <font size="-1" color="#666666" style="display: block !important; line-height: 15px !important; width: 96px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">Snowstorm 圣诞节快到了，给BLOG加点雪花效果吧~</font>
                    </a>
                </td>
                <td width="96" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #B0BF32 !important;">
                    <a target="_blank" title="时隔好~久，终于又完成一个WP站，简洁最高！~ 浏览器宽高数据读取的JS方法汇总" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.iros.me%2Fnew-wordpress-website-mareen.html&from=http%3A%2F%2Fwww.iros.me%2Finhabit-javascript-ordered-pics-show.html">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #B0BF32 !important; width: 90px !important; height: 90px !important;" src="http://static.wumii.com/images/blogWidget/wordpress_default.gif" width="90px" height="90px" /><br />
                        <font size="-1" color="#666666" style="display: block !important; line-height: 15px !important; width: 96px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">时隔好~久，终于又完成一个WP站，简洁最高！~ 浏览器宽高数据读取的JS方法汇总</font>
                    </a>
                </td>
                <td width="96" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #B0BF32 !important;">
                    <a target="_blank" title="Sortable Table 可排序表格JS收集" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.iros.me%2Fsortable-table-js-collection.html&from=http%3A%2F%2Fwww.iros.me%2Finhabit-javascript-ordered-pics-show.html">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #B0BF32 !important; width: 90px !important; height: 90px !important;" src="http://static.wumii.com/site_images/2011/09/09/29584895.jpg" width="90px" height="90px" /><br />
                        <font size="-1" color="#666666" style="display: block !important; line-height: 15px !important; width: 96px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">Sortable Table 可排序表格JS收集</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>很有意思的结构设计，底部的SPONSOR部分使用了TABLE结构，<span style="text-decoration: line-through;" >实现了小图片从左到右从上到下依次显示的效果</span>（这个貌似只能在IE下看见~），顶部JS效果代码加在了这之后，等底部全部图片载入完成再回过头来实现顶部效果，一开始吸引我的就是这个啦， 这些小图是按顺序载入滴，并且是ORDER指定顺序！~ 于是研究了一下~~</p>
<p><a  class="highslide-image" onclick="return hs.expand(this);" href="http://www.originalcolors.cn/work/wp-content/plugins/pika/readimg.php?src=http%3A%2F%2Flh4.gouride.com%2F_SAtXNAuCabM%2FSTSmhL8vmhI%2FAAAAAAAABDs%2FehuRXukNAH8%2Finhabit.jpg?imgmax=800"><img title="Click to enlarge"  src="http://www.originalcolors.cn/work/wp-content/plugins/pika/readimg.php?src=http%3A%2F%2Flh4.gouride.com%2F_SAtXNAuCabM%2FSTSmhL8vmhI%2FAAAAAAAABDs%2FehuRXukNAH8%2Finhabit.jpg?imgmax=800"  alt="image" /></a></p>
<p><span id="more-279" ></span></p>
<blockquote><p>赶紧自己去 <a  href="http://inhabit.coptix.com/" target="_blank">看看</a> 吧~~ 也可以 <a  href="http://www.originalcolors.cn/work/samples/inhabit/inhabit.html" target="_blank">看看</a> 我学习来的例子~~</p></blockquote>
<p><strong>学习要点：</strong></p>
<p>页面代码的加载顺序一般是从上到下的，利用这个可以巧妙的将重要内容的代码位置前移，以达到最先显示出来的效果，同时，这个时候使用DIV来做框架的好处也会显现，因为它不像TABLE一样需要&lt;/table&gt;加载闭合后才开始显示内容，而是加载多少就实时显示多少，恩恩，以后肯定都用得到的，今天大收获，哈~</p>

	标签：<a href="http://www.iros.me/tag/inhabit" title="inhabit" rel="tag">inhabit</a>, <a href="http://www.iros.me/tag/javascript" title="Javascript" rel="tag">Javascript</a>, <a href="http://www.iros.me/tag/%e5%9b%be%e7%89%87%e9%a1%ba%e5%ba%8f%e8%bd%bd%e5%85%a5" title="图片顺序载入" rel="tag">图片顺序载入</a><br />
]]></content:encoded>
			<wfw:commentRss>http://www.iros.me/inhabit-javascript-ordered-pics-show.html/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
	</channel>
</rss>

