2012年JB懶人表使用教學

[abw216]

不愧是傳說的apple神,感謝大大

[uni30108]

我來理解一下這是什麼問題

感謝回報

小弟不才
我不太了解原始檔寫啥
可是我把php改成htm就沒這種狀況發生

如果不是這種問題，我先道歉

[h999342]

我來理解一下這是什麼問題

感謝回報

根據我剛剛的測試
推測是因Chrome下載到各個縮圖的時間若不一
先跑好的先塞進去
後跑好的後面才塞進去
造成排版跑位的問題

當然
這樣的問題並不會在local測試的時候發生
因為相較於從遠端主機上下載檔案的時間
讀取硬碟檔案的時間是極為短暫的
並不會有明顯的延遲
所以開發過程中沒有注意到

我上面寫的重新整理後會正常
那是不負責任的解決方法
因為Chrome會去用cache好的圖片去排版
當然不會亂掉

解決方法是
賦予每張縮圖 寬 和 高 的參數 (24px*24px)
這樣在載入的時候
瀏覽器就會先把圖片的位置考慮進去
就算比較晚才下載完畢的圖片
也已經有預留好的位置
版面就可以維持正常

即
將下方選單的code改為

<!-- 下方選單-->
    <div id="menu"> 
    <ul> 
    <li class="fbar">&nbsp;</li>

	<li class="menuItem"><a href="" target="_blank" title="iPhone 4"><img src="https://attach.iphone4.tw/files/jbtable-img/products/iphone4.thumb.png" alt="thumbnail" width="24" height="24" /></a></li>
	<li class="menuItem"><a href="" target="_blank" title="iPhone 3GS"><img src="https://attach.iphone4.tw/files/jbtable-img/products/iphone.thumb.png" alt="thumbnail" width="24" height="24" /></a></li>
	<li class="menuItem"><a href="" target="_blank" title="iPhone 3G"><img src="https://attach.iphone4.tw/files/jbtable-img/products/iphone.thumb.png" alt="thumbnail" width="24" height="24" /></a></li>
	<li class="menuItem"><a href="" target="_blank" title="iPhone 2G"><img src="https://attach.iphone4.tw/files/jbtable-img/products/iphone.thumb.png" alt="thumbnail" width="24" height="24" /></a></li>
	<li class="menuItem"><a href="" target="_blank" title="iPad WiFi/3G"><img src="https://attach.iphone4.tw/files/jbtable-img/products/ipad.thumb.png" alt="thumbnail" width="24" height="24" /></a></li>
	<li class="menuItem"><a href="" target="_blank" title="Apple TV2"><img src="https://attach.iphone4.tw/files/jbtable-img/products/appletv2.thumb.png" alt="thumbnail" width="24" height="24" /></a></li>
	<li class="menuItem"><a href="" target="_blank" title="關於JB懶人表"><img src="https://attach.iphone4.tw/files/jbtable-img/about.png" alt="thumbnail" width="24" height="24" /></a></li>

    </ul> 

    </div>
<!-- 下方選單 EOF-->

經過我於某遙遠的慢速網頁空間測試
這樣的方法是有效的
應該不會再跑掉了

[ePhone]

時間問題嗎? 每個圖載入的時間不一樣?
讓我想到一個 css 的方法耶...

就是同一張圖, 再用 CSS 去切出 大圖 取得 需要的部分
教學範例在這裡 http://www.w3schools.com/css/css_image_sprites.asp
第二個範例 和 h999342 大大 貼出來的 Code, 還蠻像的

[h999342]

時間問題嗎? 每個圖載入的時間不一樣?
讓我想到一個 css 的方法耶...

就是同一張圖, 再用 CSS 去切出 大圖 取得 需要的部分
教學範例在這裡 http://www.w3schools.com/css/css_image_sprites.asp
第二個範例 和 h999342 大大 貼出來的 Code, 還蠻像的

我的意思是
如果不同圖片下載完成的時間差太多的話

像是
https://docs.google.com/leaf?id=0B2H...thkey=CMuP4MYJ


CSS切大圖的方法感覺不錯也
收起來, 希望以後會用到
這樣可以減少request數
當圖片的size很小,數量很多的時候就方便了

[warren168]

感謝您的用心讓我們更佳的便利!!

[andrawya]

感謝吉米大的分類，小弟按圖索驥已完成JB

[chjui1020]

說的實在是太棒了!!
真的是有這樣的感覺

[chjui1020]

大大你好
請問我怎麼不能觀看閱讀
2011年JB懶人表使用教學
謝謝

[吉米丘]

即
將下方選單的code改為

經過我於某遙遠的慢速網頁空間測試
這樣的方法是有效的
應該不會再跑掉了

已經照您的方式修改了，大家來看看效果如何