带有预加载图像的 jquery 图像答案

【问题标题】：jquery images with preloading image带有预加载图像的 jquery 图像
【发布时间】：2010-11-01 01:01:56
【问题描述】：

$(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?
          });

【问题讨论】：

标签： jquery ajax image preload

【解决方案1】：

您可能想尝试改用Lazy Loader 插件（或类似插件）。请注意，您可以指定自己的占位符图像。

【讨论】：

我删除了我原来的答案，因为我错过了图像没有被替换，而是注入到 DIV 中。我的答案在后一种情况下不起作用。

【解决方案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");

请告诉我进展如何。

【讨论】：

【解决方案3】：

找到了一个插件，完全符合我的要求，使用占位符 gif 图像，直到图像完全加载然后显示最终图像

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

【讨论】：