[JS]jQueryを使用したプリロード(画像の先読み)用のスクリプト
Post on:2010年8月3日
ロールオーバーで画像を変更する際に使用するプリロード用のjQueryを使用したスクリプトを紹介します。
Preloading Images with jQuery and JavaScript
ロールオーバー時に表示する画像をその都度ダウンロードして表示すると時間のギャップが生じます。その時間の遅れを避けるために、画像を事前にバックグラウンドで読み込みます。
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<textarea name="code" class="html" cols="60" rows="5"> (function($) { var cache = []; // Arguments are image paths relative to the current page. $.preLoadImages = function() { var args_len = arguments.length; for (var i = args_len; i--;) { var cacheImage = document.createElement('img'); cacheImage.src = arguments[i]; cache.push(cacheImage); } } })(jQuery) </textarea> |
画像の指定は下記のように記述します。
JavaScript
1 2 3 |
<textarea name="code" class="html" cols="60" rows="5"> jQuery.preLoadImages("image1.gif", "/path/to/image2.png"); </textarea> |
sponsors