preload images using jQuery

Question

Я получил этот фрагмент кода, следующего за tutorial comment (Джеймсом) на Nettuts, и я хотел бы его реализовать.

Учебный метод предварительной загрузки изображений длинный, но мне понравилась сокращенная версия Джеймса, однако я попытался реализовать это, и я не понимаю.

Кажется, мне нужно сначала настроить свой массив, цикл через этот массив, который затем создает объекты изображения и загружает их. Тем не менее, когда я проверяю свой Firebug, я не вижу загрузки изображений в кеш.

$(function(){ 
     var imgArray = ['bghome01.jpg', 'bghome02.jpg', 'bghome03.jpg']; 
     $.preload = function (imgArray) { 
      $.each(imgArray, function() { 
       alert(imgArray); 
       (new Image()).src = 'Images/' + this; 
      }); 
     }; 
    }); 

Буду признателен за помощь!

Answer 1

Если I, где в браузере я бы загружал только изображения, которые находятся на странице, поэтому я подозреваю, что он произошел, потому что вы никогда не добавляли изображения в DOM. Попробуйте настроить создание нового тега img с помощью style="visibility:hidden" и добавьте его в DOM.

Answer 2

Я предполагаю, что вы не держите объекты изображения вокруг, поэтому сбор мусора может выбросить их, прежде чем изображение может быть загружено.

Смотрите эту статью для некоторого кода: http://engineeredweb.com/blog/09/12/preloading-images-jquery-and-javascript

Заметим, что JQuery не делает никакой магии; это все JavaScript в конце, поэтому что-то должно быть не так с вашим кодом. Поэтому, если сохранение объектов изображения не помогает, возможно, this article укажет вам в правильном направлении.

Answer 3

Прямо здесь, вы определения функции, но не вызова это:

$.preload = function (imgArray) { 

Если вы просто хотите, чтобы загрузить изображения, вы можете стройный его вниз к этому:

$(function(){ 
    var imgArray = ['bghome01.jpg', 'bghome02.jpg', 'bghome03.jpg']; 
    $.each(imgArray, function() { 
    (new Image()).src = 'Images/' + this; 
    }); 
}); 

Или вы можете сделать это с помощью своего исходного метода, определение функции может быть во внешнем файле, но на странице вам нужно позвонить ему:

var imgArray = ['bghome01.jpg', 'bghome02.jpg', 'bghome03.jpg']; 
$.preload(imgArray); 

Я думаю, что путаница происходит от imgArray является именем массива и параметра, но это 2 разных вещи, это может быть менее запутанным, если вы дали параметр в $.preload другое имя.