jQuery檢測圖像加載

我正在建設一個使用jQuery Mobile的網站，而且我無法正確操作圖像。jQuery檢測圖像加載

首先，here's the address。有問題的圖像位於任何網站和圖形鏈接上。

在我的CSS，我使圖像擴展到屏幕的尺寸：

img.size{ 
    width: 95%; 
    padding: 1.5% 1.8% 3% 2.3%; 
    background-image: url("../images/content/img-bg.png"); 
    background-size: 100%; 
}

遺憾的是，之前的圖像加載高度爲0像素，但填充仍顯示，所以我只看到醜陋的頂部我的背景部分，直到圖像加載掩蓋它。

我應該能夠隱藏圖像，將背景圖像設置爲none，或者將填充設置爲0px直到圖像加載，然後使用jQuery進行更改，但是（我認爲是因爲圖像是通過Ajax加載後的整個頁面已加載）jQuery沒有看到圖像已加載。例如，這將使所有圖像隱藏的，所以被檢測到的圖像：

$('img').css('visibility', 'hidden');

但是這是不行的，即使我去掉上面的代碼行，並有CSS隱藏通過defualt

圖像

所以在CSS：

img{ 
    visibility: hidden; 
}

，並在代碼：

$('img').load(function() { 
    $('img').css('visibility', 'visible'); 
});

或

$('img').complete(function() { 
    $('img').css('visibility', 'visible'); 
});

有關如何讓jQuery真正檢測我的圖像是否已加載的任何想法？即使是純粹的CSS解決方案也可以，但我仍然想知道jQuery的問題是什麼。

謝謝。

p.s.我可以在px或em中添加CSS高度，但是

height: 95%;

不起作用。我意識到百分比高度通常不起作用，但由於圖像寬度隨着屏幕而變化，因此高度也需要一致，因此不設置高度會迫使CSS限制比例。

來源

2011-06-01 Tomas Mulder

我覺得很奇怪，你必須定義圖像的高度和寬度，當你正在顯示圖像時，你是否已經定義了寬度和高度？例如。 '''你試過使用display：none而不是可見性屬性嗎？ – 2011-06-01 22:00:51

對不起。仍然有這個問題。顯示：none也不起作用：就像jQuery無法以任何方式操作圖像。並且設置一個百分比高度，即使是硬編碼到XHTML中也是行不通的，因爲瀏覽器窗口沒有設置百分比的基準高度（它不會添加水平滾動，因此寬度可以工作，但它不會知道垂直停止的位置）。 – 2011-06-14 07:00:36

根據不同的瀏覽器，$('img') .complete似乎比load()

這裏更好的工作是一個腳本，我做了一個沉重的相冊：

首先，你要隱藏的容器圖像，或以某種方式在它上面放置圖層......任何隱藏訪問者加載的內容。

countImgs = $("#container > img").size(); 
imgsLoaded = 0; 

$("#container > img").each(function() { 

     if(this.complete) { 
      imgsLoaded++; 
     } else { 
      $(this).load(function() { 
       imgsLoaded++; 
      }); 
     } 
});

然後，做一些功能與setTimeout測試是否imgsLoaded==compteImgs。

來源

2011-06-01 18:11:04 ecchymose

感謝您的信息，但.complete似乎也無法正常工作。看到我編輯的問題。 – 2011-06-01 21:38:35

jQuery檢測圖像加載

回答

相關問題