製作使用jQuery

在一個div可見的圖像在我的asp.net mvc4看法我有一些嵌套的div來顯示圖像，並在其文字象下面這樣：製作使用jQuery

和CSS：

.elementStatus 
{ 
    visibility: hidden; 
} 

.image{ 
    float: left; 
    margin-top: 2px; 
    padding-top: 1px; 
    padding-left: 10px; 
    width: 35px;  
} 
.text{ 
    float: left; 
    margin-top: 1px; 
    padding-left: 14px; 
    padding-bottom: 2px; 
    width: 35%; 
    font-weight: bold; 
    font-size: 1em; 
}

像上面的代碼，我有一些人，讓我們說，超過20

正如你可以看到，外格，稱爲外，最初是隱藏所以無論圖像，也沒有文字顯示爲我想要開始。最初，一些默認圖像被設置，並且這些初始圖像是GIF動畫。

然後啓動一個進程，並將這些div設置爲可見（不會更改圖像）。

第一個問題是默認情況下圖像和文本不可見（它會繼續隱藏）。如果我在CSS中默認設置爲可見而不是隱藏，則它們可見。

我做他們看到做的是：

$('#Outer' + elemId).prop("visibility", "visible");

注意，上面的線內的，我的意思是，elemId將是1,2，依此類推......

第二期： 如果我設置爲從CSS開始顯示，那麼顯示默認的動畫GIF圖像和文本，沒問題，但在執行過程中，我想更改這些圖像以獲取其他消息（不是動畫這些新圖像是PNG圖像，而不是gif），所以我執行以下操作：

$('#MyImg' + elemId).prop("src", '@Url.Content("~/images/NewImage.png")');

注意再次，在上述行，elemId將是1,2，依此類推......

我在這裏的問題是，圖像被改變，但他們都顯示爲黑色十字，然後，幾秒鐘後，當進程終止時，它們開始正確可見。這裏有什麼問題？

來源

2013-10-02 Rodri

第二個問題是：現在，一旦外部div可見，在過程中的某個時刻，我更改其他新圖像（PNG）的動畫GIF，但問題是圖像沒有立即更新，它更新爲新幾秒鐘之後的圖像...但是，圖像下方的文本（在更新圖像的同時更新）會立即更新，但圖像不會更新。爲什麼？ – Rodri

您需要設置樣式屬性，該元素沒有名爲visibility的屬性，它是具有可見性屬性的樣式屬性。

所以做：

$('#Outer' + elemId).css("visibility", "visible");

最有可能你提到關於圖像的黑色十字架可能是圖像的URL不正確，瀏覽器顯示只是沒有找到該圖片的佔位符。如果你檢查你的控制檯，你可能會看到圖像的url是否被實際加載（也就是說，如果不是，你會看到404錯誤）。

來源

2013-10-02 20:53:42 PSL

太棒了！有用。對於我的第二個問題？現在，一旦外部div可見，在此過程中的某個時刻，我將更改其他新圖像（PNG）的動畫GIF，但問題在於圖像未立即更新，它會在幾秒鐘後更新爲新圖像。。圖像下方的文字會立即更新，但圖像不會。爲什麼？ – Rodri

@Rodri也取決於圖像的大小。它太大，它可能需要一些時間來加載。順便說一下，圖片下的文字是什麼意思？它是一個獨立的元素還是圖像本身的一部分。 – PSL

圖像下方的文字是圖像div下方的div，請參閱我的文章，它標有文本：「狀態文本」。新的圖像是PNG，是24x24像素和1.29KB大小。無論如何，默認的動畫gif設置爲默認值，然後使其可見，是30x30像素和2.13KB的大小，在這種情況下，它立即顯示。爲什麼尺寸和尺寸更小的新產品現在即時展示？唯一的區別是通過修改src屬性在運行時更改新的。也許PNG加載速度比GIF慢？ – Rodri

製作使用jQuery

回答

相關問題