Question

我有一个页面可以交换一些相当大的图像。页面最初加载时预加载太多，因此不是一个选项。所以我需要做的是按照用户的要求加载它们。现在我使用jQuery替换img＆＃39; s src。这样工作正常，但我加载的图像大约是500KB，看起来很糟糕，因为他们在下载时画下屏幕。我想要做的是在图像处于加载过程中时在页面上弹出一个加载gif，然后在加载图像后加载gif消失。我努力想找到办法做到这一点。以下是我所拥有的JS / jQuery代码，它只是替换了src。

var product = "bowl";
var image = "dog.jpg"; //this is actually pulled from a data attribute, but its just hardcoded here for an example

$("#images img[data-product="+product+"]").attr("src", "/img/tablesetting/"+image);

Answer 1

我做了一个工作jsfiddle显示这个原则

http://jsfiddle.net/kasperfish/c72RT/4/

我最近需要做同样的事情。基本上我把图像包装在容器div中。在容器中我添加了一个span元素，其中嵌入了我的ajax loader gif。此范围必须最初隐藏，但在发出ajax请求时可见。当图像完全加载时，跨度将被删除。

在ajax调用之前

 $('#your_image_container').find('span').show();

成功

 $('#your_image').attr('src', 'your/image/url').load(function() {

      $('#your_image_container').find('span').fadeOut(); 

  });

我做了一个jsfiddle显示这个原则

http://jsfiddle.net/kasperfish/c72RT/4/

Answer 2

预加载图片。

var product = "bowl";
var imageSrc = "dog.jpg";
var imgEl = $("#images img[data-product="+product+"]");
// show loading graphic only if it's needed
var timer = setTimeout(function(){
    imgEl.attr("src", "/img/loading.gif");
},50);

// preload image
var img = new Image();
img.onload = function() {
    clearTimeout(timer);
    imgEl.attr("src",imageSrc);
}
img.src = imageSrc;

Answer 3

$img.attr("src", newImage);

if (!$img.get(0).complete) {
    $img
        .hide()
        .after("<img src=throbber>")
        .on("load", function () {
             $(this).show().next().remove();
         });
}

替换img src但在下载图像时加载图形显示

3 个答案: