画像のプリロード

画像のプリロード(先読み)を設定

jQuery

$(function () { // 画像が1つ $('<img>').attr('src', '/img/sample.png').appendTo('body').hide(); }); $(function () { // 画像複数 var arr = [ '/img/sample01.png', '/img/sample02.png', 'img/sample03.png' ]; $.each(arr, function(i) { $('<img>').attr('src', arr[i]).appendTo('body').hide(); }); }); $(function () { // 画像複数(連番) var serial = 0; for(var i = 1; i <= 20; i++) { if (i < 10) { serial = '0' + i; } else { serial = i; } $('<img>').attr('src', '/img/sample' + serial + '.png').appendTo('body').hide(); } });

非jQuery版

JavaScript

window.addEventListener('load', function() { // 画像が1つ var elem = document.createElement('img'); elem.src = '/img/sample.png'; elem.style.display = 'none'; document.getElementsByTagName('body')[0].appendChild(elem); }); window.addEventListener('load', function() { // 画像複数 var arr = [ '/img/sample01.png', '/img/sample02.png', 'img/sample03.png' ]; arr.forEach(function(e) { var elem = document.createElement('img'); elem.src = e; elem.style.display = 'none'; document.getElementsByTagName('body')[0].appendChild(elem); }); }); window.addEventListener('load', function() { // 画像複数(連番) var serial = 0; for(var i = 1; i <= 20; i++) { if (i < 10) { serial = '0' + i; } else { serial = i; } var elem = document.createElement('img'); elem.src = '/img/sample' + serial + '.png'; elem.style.display = 'none'; document.getElementsByTagName('body')[0].appendChild(elem); } });

最新の記事

プロフィール

流されるままにウェブ業界で仕事しています。主にLAPP環境でPHPを書いています。最近はjQueryで遊んでいます。
※動作確認について