0

我正在通过 jQuery 更改图像，但是图像需要几秒钟才能加载，因此看起来就像单击什么也没做，所以我需要输入一个临时的“正在加载”图像来向用户显示图像正在加载。

然而，正如我过去所经历的那样，JS 并没有真正在事情发生时触发事情，它会等到完整的功能完成后再发生事情；我记得过去想出了一个解决方案，但我就是不记得它是什么。

我有这个可以完成每项任务，但用户永远不会看到加载图像，因为它在用户看到任何东西之前就被新图像替换了。

function changeMainImage(image) {

    // Set temporary loading image
    jQuery('#main_image').attr('src', 'images/loading.jpeg');    

    // Set big image
    var big_image = image + '-big.png'

    // Update main image url
    jQuery('#main_image').attr('src', big_image);

}

我尝试将以下内容放入单独的函数中：

// Set temporary loading image
jQuery('#main_image').attr('src', 'images/loading.jpeg');

..并像这样在其他函数之前调用它..

onclick="setLoadingIMage(); changeMainImage('images/ai');"

但这并没有改变任何东西。

谁能告诉我我需要做什么才能达到我想要的效果？

4

4 回答 4

2 
<label id="label"> Loading </label>
<img src="src" id="image" style="display:none;"/>

JS：

var image = document.getElementById('image');
var label = document.getElementById('label');

image.onload = function(){
    image.style.display = "block";
    label.style.display = "none";
}

小提琴： http: //jsfiddle.net/3x63F/（图片太大，加载可能需要几分钟）

于 2012-12-12T10:23:30.517 回答
1

这将显示loading.jpeg直到图像被加载。

function changeMainImage(image) {

    jQuery('#main_image').attr('src', 'images/loading.jpeg');

    var img = new Image();
    img.src = image + "-big.png";

    img.onload = function( ) {
          jQuery('#main_image').attr('src', img.src );
    }
}

如果图像保存在缓存中，img.onload则将立即触发。

演示在这里

于 2012-12-12T10:26:53.720 回答
0

这是我为此使用的一个技巧：

  1. 在 div 中嵌入图像
  2. 保持加载图像作为 Div 的背景
  3. 加载图像时，显示隐藏加载背景。

希望这对你有用。此外，您可以选择动画 gif 来加载图像。

于 2012-12-12T10:24:04.907 回答
0

这是在后台加载图像时如何在前台显示微调器的教程

图像加载微调器

于 2012-12-12T10:26:02.267 回答