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（）的图像，但我不太确定如何从函数内部引用它？

我试过没有运气，任何人都看到任何问题＆gt;？我想使用相同的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

带预加载图像的jquery图像

3 个答案: