■
Googleの画像読み込み
おおお、なんというコダワリっぷり。
確かにページ下部の「Goooogle」とか、各文字ごとに読み込んでいたらサーバ側にもクライアント側にも無駄な負荷がかかりますけど、細かいところも手抜かないなあ。。。
手法としてはCSSの背景画像要素として全ての画像を含んだPNG画像を1枚だけ読み込んで、 それを座標指定で切り出して表示しているみたいですね。JavaScriptは不要。
こんな感じでダミーのブロック要素を定義して(↑)、CSSで表示位置と幅を指定して切り出してました(↓)。
ブラウザ依存もしないことを考えると、かなり使えるTipsのような気がします。
手法としてはCSSの背景画像要素として全ての画像を含んだPNG画像を1枚だけ読み込んで、 それを座標指定で切り出して表示しているみたいですね。JavaScriptは不要。
<div id=nc>
</div>
#navbar div,#logo span{background:url(/images/nav_logo3.png) no-repeat;overflow:hidden;height:26px}
#navbar .nr{background-position:-60px 0;width:16px}
#navbar #np{width:44px}
#navbar #nf{background-position:-26px 0;width:18px}
#navbar #nc{background-position:-44px 0;width:16px}
#navbar #nn{background-position:-76px 0;width:66px;margin-right:34px}
#navbar #nl{background-position:-76px 0;width:46px}
posted at 13:46 [ /misc ]







