jquery - 带有预加载图像的 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