Почему эта предварительная загрузка изображения не работает?

Question

У меня есть эта функция в файле с именем plugins.js :

$.fn.preload = function(){
    this.each(function(){
        $('<img/>')[0].src = this;
    });
}

Тогда у меня есть это в другом файле с именем footer.js :

$(['img1.jpg','img2.jpg','img3.jpg']).preload();

Разве все это не должно предварительно загружать изображения?

Все изображения находятся в папке, называемой «графика».

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

Есть ли способ проверить, что изображения были предварительно загружены? Могу ли я сделать это с помощью приведенного выше сценария?

Я не очень хорошо разбираюсь в jquery, поэтому помощь в коде приветствуется.

Спасибо

Answer 1

Я делаю это, используя объект Image:

var img = new Image();
img.src = 'image.jpg';
img.onload = function(){
    alert('Image has been preloaded! width: '+ this.width + ', height: '+this.height);
};
img.onload = function(){
    alert('There was an error loading: '+this.src);
}

Итак, ваш плагин должен выглядеть примерно так (не проверено):

$.fn.preload = function(){
    var img = new Image();
    this.each(function(){
        img.src = this;
    });
}

Тем не менее, вам нужно использовать обратный вызов onload, чтобы убедиться, что все изображения загружены, или просто подождать.

ура!

Answer 2

Ваш скрипт должен работать, но если изображения находятся в другом каталоге (графическом), вам нужно расширить путь:

$.fn.preload = function(){
    this.each(function(){
        $('<img/>')[0].src = 'graphics/'+this;
    });
}

Answer 3

Не существует метода, который бы указывал, были ли изображения предварительно загружены или нет.Вы можете использовать событие image load, чтобы определить, загружено изображение или нет.

Например,

$("img").load(function(){
   //Image loaded
});

Существует также событие ошибки, которое запускается, если загрузка изображения завершается неудачей по какой-либо причине.

 $("img").error(function(){
       //Image load failed
 });

Answer 4

Добрый день, сэр, вы можете проверить, загружены ли ваши изображения заранее, используя firebug в Firefox или консоль разработчика в Chrome.У них обеих есть вкладки (соответственно Net Net и Network), которые позволяют вам отслеживать все запросы, которые выполняет ваш браузер.

В Firefox также есть плагин инструментов разработчика, который позволит вам отключить кэширование.Это в сочетании с вкладкой «Сеть» должно дать вам точное представление о том, что загружается на веб-странице, прежде чем что-либо делать на самой веб-странице после обновления.

Что касается сценария предварительной загрузки;Вы можете проверить это:

http://engineeredweb.com/blog/09/12/preloading-images-jquery-and-javascript

Answer 5

отлично работает у меня:

Пример: http://jsfiddle.net/98rXx/

<button id='click'>click here</button>

$.fn.preload = function(){
    this.each(function(){
        $('<img/>').load(function(){
            alert('loaded');
        })[0].src = this;
    });
};

$(["http://dummyimage.com/120x90/f00/fff.png&text=my+image"]).preload();

  // clicking the button displays the image immediately
$('button').click(function() {
    $('<img>',{src:"http://dummyimage.com/120x90/f00/fff.png&text=my+image"})
        .appendTo(document.body);
});

---

Хотя я думаю, что вам лучше сделать его более полезным:

$.preload = function( arr ){
    $.each( arr, function(i,v){
        $('<img/>')[0].src = v;
    });
};

$.preload(['img1.jpg','img2.jpg','img3.jpg']);