JQuery изображения с предварительной загрузкой изображения

Question

$(document).ready(function(){
        // The plugin
        $.fn.image = function(src, f){
        return this.each(function(){
                var i = new Image();
                        i.src = src;
                        i.onload = f;
                        this.appendChild(i);
                });
        }

        // The code for the image to load
  $("#asdf").image("images/3a.jpg",function(){
            alert("The image is loaded now");
        });     
});

Я нашел вышеуказанный код. Я хочу иметь элемент, который можно загрузить с изображением, но перед тем, как изображение будет полностью загружено, я хочу, чтобы он отображал загрузочный GIF (это делается с помощью css). Это работает, но покажет загрузку изображения вместо ожидания его полной загрузки. Я думаю, что я должен показывать изображение, где оповещение использует hide() show(), но я не совсем уверен, как ссылаться на него из функции?

---

я попробовал это без удачи, кто-нибудь видит какие-либо проблемы>? я хочу использовать тот же div для загрузки GIF, то окончательное изображение

$('#preload').replaceWith('<img src="preloader.gif" />')
          .image( "http://www.google.co.uk/intl/en_uk/images/logo.gif", function() {
             $('#preload').replaceWith( this );
             // is this called when image fully loaded?
          });

Answer 1

Возможно, вы захотите использовать вместо этого плагин Lazy Loader (или аналогичный). Обратите внимание, что вы можете указать собственное изображение-заполнитель.

Answer 2

Вы можете попробовать что-то вроде этого:

    var $loadingImg = $('<img />').attr('id','loadingImg').attr('src','preloader.gif');
    $("#preload").html($loadingImg.html()).image("http://www.google.co.uk/intl/en_uk/images/logo.gif");

Дайте мне знать, как это происходит.

Answer 3

Нашел плагин, который делает именно то, что я ищу, используя изображение-заполнитель GIF, пока изображение не будет полностью загружено, а затем показывает окончательное изображение

http://flesler.blogspot.com/2008/01/jquerypreload.html