在整個函數完成之前觸發部分javascript

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將立即觸發。

在這里演示

Answer 3

這是我為此使用的一個技巧：

1. 將圖像嵌入div
2. 保持加載圖像作為Div的背景
3. 加載圖像后，將顯示隱藏的加載背景。

希望這對您有用。 另外，您可以選擇動畫gif來加載圖像。

Answer 4

這是有關如何在背景加載圖像時完成在前景中顯示微調框的教程

圖像加載微調器