5

我有一个页面可以交换一些相当大的图像。页面最初加载时有太多需要预加载，所以这不是一个选项。所以我需要做的是根据用户的要求加载它们。现在我正在使用 jQuery 来替换img's src。这工作正常，但我正在加载的图像可能在 500 KB 左右，并且在下载时在屏幕上绘制时看起来很糟糕。我想做的是在加载图像时在页面上弹出一个加载 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);
4

3 回答 3

4

我做了一个工作的jsfiddle来展示这个原理

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

我最近需要做同样的事情。基本上我将图像包装在容器 div 中。在容器中，我添加了一个 span 元素，其中嵌入了我的 ajax 加载程序 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/

于 2013-09-19T20:41:34.320 回答
1

预加载图像。

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;
于 2013-09-19T20:36:55.130 回答
0 
$img.attr("src", newImage);

if (!$img.get(0).complete) {
    $img
        .hide()
        .after("<img src=throbber>")
        .on("load", function () {
             $(this).show().next().remove();
         });
}
于 2013-09-19T20:24:51.017 回答