Question

我正在通过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');"

但这并没有改变任何事情。

有人能告诉我我需要做些什么才能达到我想要的效果吗？

Answer 1

<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/（图片太大，可能需要几分钟才能加载）

Answer 2

这将显示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将立即触发。

演示here

Answer 3

这是我用来做的一个技巧：

将图片嵌入div
将加载图片保留为Div
加载图像时，会显示隐藏加载背景。

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

Answer 4

以下是如何在背景中加载图像时如何在前景中显示微调器的教程

Image Loading Spinner

在整个函数完成之前获取部分javascript

4 个答案: