show（）函數不能在div中工作

我顯示並隱藏了一個包含加載/等待gif圖像的div。只需點擊一個按鈕，我會在點擊功能結束時呼叫$("#div").show()和.hide()。但圖像一般不顯示。當我在.show()行旁邊放置斷點時，它會顯示圖像。我也試過.css("display","")，但它不會工作。show（）函數不能在div中工作

請建議任何其他方式，或告訴我可能是什麼問題。

謝謝。

我的代碼看起來像，下面

$("#button").click(function(){ 

    $("#div").show(); // showing image so that user will know that a process is going on. 

    //other working code 

    $("#div").hide(); // hiding will indicate process completion 
});

來源

2013-02-05 Dheeraj

而你的HTML是......？ – hjpotter92

是真正'div'的圖像ID嗎？ – frenchie

如果代碼運行速度非常快，則圖像在刪除之前不會顯示。您應該放入一個setTimeout調用來隱藏圖像。 – Kansha

瀏覽器有一個非常看中工作，當一個腳本執行風格，它延遲所有的接口繪製腳本完成後。

所以在你的代碼中，瀏覽器確實顯示了div（你可以得到正確的offsetWidth和offsetHeight），但是你看不到它（因爲繪圖被延遲）。

調試器在代碼上創建一箇中斷點，在那裏瀏覽器刷新屏幕的所有更改，以便您可以看到圖像，調用alert()可能會產生相同的效果。

我上面的狀態不是100％正確的，因爲實際上瀏覽器正在開發一種事件循環和延遲佈局和所有的繪圖和更多的其他作品時，腳本執行下，但我認爲它可以回答你的問題，如果你想要一個更精確和更復雜的答案，我會很高興寫更多:)

來源

2013-02-05 05:47:52 otakustay

在我的例子中，在.show（）和.hide（）之間只有JavaScript代碼（如if..else，loop，dom遍歷和manupulation，以及沒有ajax或任何類型的異步事物）。是的，但在這兩個之間有一些非常複雜的代碼，在內部循環和函數調用方面很複雜。我認爲問題是由於JavaScript掛起瀏覽器和DOM /元素屬性的變化不會發生。 – Dheeraj

你打電話顯示和隱藏沒有動畫在同一個函數調用。因爲這是同步發生的，所以2個函數調用將在同一個線程中進行，因爲JavaScript是單線程的。您根本不會注意到任何更改，因爲它在瀏覽器甚至可以更新顯示之前顯示並隱藏在同一個線程中。如果有某種異步調用，你會看到它，但你似乎沒有。

您可以通過將所有工作代碼放置在setTimeout中的初始顯示之後進行僞裝。

$("#div").show(); 
setTimeout(function(){ 
    ...other working code 
    $("#div").hide(); 
}, 100);

這將延時100ms的處理，但一旦處理開始，如果工作代碼部分需要一秒鐘來完成你的動畫GIF實際上不會因動畫動畫的顯示無法運行，而JavaScript正在執行（由於瀏覽器的單線程行爲）。

來源

2013-02-05 05:57:58 codefactor

Javascript是單線程的，並且UI渲染和腳本執行共享相同的線程。由於瀏覽器進行優化的方式，您沒有看到show（）和hide（）效果。

您可以利用JQuery承諾機制來解決您的問題。例子here

而不是做這樣

1）顯示DIV

2）執行一些代碼

3）隱藏DIV

你會去這樣做

1）顯示DIV

2）在 '顯示' 完成
  2.1) execute your code, 
      2.2) hide the DIV 

我創建了一個JSbin工作示例here

來源

2013-02-05 06:15:16

show（）函數不能在div中工作

回答

相關問題