YUIのImageLoader Utilityの使い方

Yahoo! UI LibraryのImageLoader Utilityを使ってみた。

ImageLoader Utilityは、名前通りイメージをロードするユーティリティのこと。ページを表示するときに、ブラウザはページをロードし、そのページに読み込むcssやjs、flash、画像がパラレルにダウンロードする。画像のダウンロードに時間がかかり、他のダウンロードを邪魔したりしてページの表示の妨げになる。
ページや必要なCSS、JSのダウンロードが終わって、ページをとりあえず表示してから、JavaScriptであとから画像をダウンロードして表示させたほうが結果的にユーザによいエクスペリエンスを与えられる。
って、ことだと思う。

ページが表示された2秒後に画像を表示するサンプルソース。

ソースコード

<html>
<head>
<title>YUI ImageLoader</title>
<style type="text/css">
.top { position:absolute; top:10px; left:120px; height:75px; width:100px; }
</style>
</head>

<body>

<div class='top' id='top'></div>

</body>
</html>

<!-- Dependencies -->
<script src="http://yui.yahooapis.com/2.3.1/build/yahoo-dom-event/yahoo-dom-event.js"></script>

<!-- Source file -->
<script src="http://yui.yahooapis.com/2.3.1/build/imageloader/imageloader-experimental-min.js"></script>

<script language="javascript">
var mainGroup = new YAHOO.util.ImageLoader.group('top', 'mouseover', 2);
mainGroup.registerBgImage('top', 'http://us.i1.yimg.com/us.yimg.com/i/us/nt/ma/ma_devnet_1.gif');
mainGroup.name = 'group 1';
</script>

サンプル

http://paranoid.dip.jp/dev/yahoo/yui/ImageLoader.html

The YUI ImageLoader Utitli& Yahoo! Video

YUI Theater ? Matt Mlinac: “The YUI ImageLoader Utility” ≫ Yahoo! User Interface Blog
http://yuiblog.com/blog/2007/08/21/video-mlinac/

いつもシェア、ありがとうございます！

もっと情報を探しませんか？

過去ログ

2020 : 01 02 03 04 05 06 07 08 09 10 11 12
2019 : 01 02 03 04 05 06 07 08 09 10 11 12
2018 : 01 02 03 04 05 06 07 08 09 10 11 12
2017 : 01 02 03 04 05 06 07 08 09 10 11 12
2016 : 01 02 03 04 05 06 07 08 09 10 11 12
2015 : 01 02 03 04 05 06 07 08 09 10 11 12
2014 : 01 02 03 04 05 06 07 08 09 10 11 12
2013 : 01 02 03 04 05 06 07 08 09 10 11 12
2012 : 01 02 03 04 05 06 07 08 09 10 11 12
2011 : 01 02 03 04 05 06 07 08 09 10 11 12
2010 : 01 02 03 04 05 06 07 08 09 10 11 12
2009 : 01 02 03 04 05 06 07 08 09 10 11 12
2008 : 01 02 03 04 05 06 07 08 09 10 11 12
2007 : 01 02 03 04 05 06 07 08 09 10 11 12
2006 : 01 02 03 04 05 06 07 08 09 10 11 12
2005 : 01 02 03 04 05 06 07 08 09 10 11 12
2004 : 01 02 03 04 05 06 07 08 09 10 11 12
2003 : 01 02 03 04 05 06 07 08 09 10 11 12