網站加載問題 - 大量圖片

Question

我已經做了幾個網站，並知道基本的HTML，JavaScript和PHP。

我最近創建了一個網站，themefinder.dk，它按照我的意圖工作，除了它在進行負載加載時。在移動到正確位置之前，圖像顯示爲「不在位」幾秒鐘。這是一個picture。

我的問題是如何處理這個問題。

我發現了一些我認爲會影響到的東西：
- 從.image類中移除絕對位置可以解決加載問題，但會導致頁面看起來不像預期的那樣。
- 頁面上有大量的DOM元素。
- Javascript is running on document.ready

我試過玩弄上述，但還沒有成功。任何關於如何解決這個問題的想法或想法都是非常受歡迎的。

我目前正在調查ajax，找到一種方法或減少初始量的加載圖像。但是我還沒有經驗，所以在解決問題的同時，我會更好地瞭解ajax。

請讓我知道，如果我應該詳細闡述我的html結構或網站上的任何內容。任何幫助深表感謝。

問候
安德斯

Answer 1

無需使用AJAX負載圖像。只要頁面加載，您就可以在javascript中創建圖像元素。

var yourimage = $("<img />").attr('src', 'http://yourimageurl.com/image.jpg') 
         .load(function() { 
         if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) { 
          alert('Can\'t load image'); 
         } else { 
          $("#someid").append(yourimage); 
         } 
         });