<?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.originalcolors.cn/work/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.originalcolors.cn/work</link>
	<description>show the colorsssssss in my WORK</description>
	<lastBuildDate>Tue, 20 Jul 2010 20:21:48 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>inhabit.coptix.com 学习JS图片按指定顺序载入显示</title>
		<link>http://www.originalcolors.cn/work/inhabit-javascript-ordered-pics-show.html</link>
		<comments>http://www.originalcolors.cn/work/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, 图片顺序载入

	相关日志
	
	来体验一下Chrome Experiments，玩玩JS效果吧~ (0)
	时隔好~久，终于又完成一个WP站，简洁最高！~ 浏览器宽高数据读取的JS方法汇总 (1)
	Snowstorm 圣诞节快到了，给BLOG加点雪花效果吧~ (1)
	One Page Love 一页也精彩！~ 收获多多，学习学习！~ (0)
	jQuery 常用方法一览 (1)


]]></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.originalcolors.cn/work/tag/inhabit" title="inhabit" rel="tag nofollow">inhabit</a>, <a href="http://www.originalcolors.cn/work/tag/javascript" title="Javascript" rel="tag nofollow">Javascript</a>, <a href="http://www.originalcolors.cn/work/tag/%e5%9b%be%e7%89%87%e9%a1%ba%e5%ba%8f%e8%bd%bd%e5%85%a5" title="图片顺序载入" rel="tag nofollow">图片顺序载入</a><br />

	<br /><h4>相关日志</h4>
	<ul class="st-related-posts">
	<li><a href="http://www.originalcolors.cn/work/chrome-experiments-javascript.html" title="来体验一下Chrome Experiments，玩玩JS效果吧~ (2009-03-19)">来体验一下Chrome Experiments，玩玩JS效果吧~</a> (0)</li>
	<li><a href="http://www.originalcolors.cn/work/new-wordpress-website-mareen.html" title="时隔好~久，终于又完成一个WP站，简洁最高！~ 浏览器宽高数据读取的JS方法汇总 (2009-08-14)">时隔好~久，终于又完成一个WP站，简洁最高！~ 浏览器宽高数据读取的JS方法汇总</a> (1)</li>
	<li><a href="http://www.originalcolors.cn/work/snowstorm-javascript-effect.html" title="Snowstorm 圣诞节快到了，给BLOG加点雪花效果吧~ (2008-12-18)">Snowstorm 圣诞节快到了，给BLOG加点雪花效果吧~</a> (1)</li>
	<li><a href="http://www.originalcolors.cn/work/one-page-love-collections-study.html" title="One Page Love 一页也精彩！~ 收获多多，学习学习！~ (2008-12-16)">One Page Love 一页也精彩！~ 收获多多，学习学习！~</a> (0)</li>
	<li><a href="http://www.originalcolors.cn/work/jquery-methods.html" title="jQuery 常用方法一览 (2010-05-14)">jQuery 常用方法一览</a> (1)</li>
</ul>

]]></content:encoded>
			<wfw:commentRss>http://www.originalcolors.cn/work/inhabit-javascript-ordered-pics-show.html/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
	</channel>
</rss>
