jquery加載圖像，而元素加載

我正在尋找任何教程/有關插入加載GIF元素加載時，我已經看到它在一些網站的文章。我似乎只能找到有關預加載圖像的文章。jquery加載圖像，而元素加載

來源

2009-06-05 michael

我做了一個插件來簡化所有這些。這裏的演示：http://jquery-values.googlecode.com/svn/other/loading/jquery.loading.htm – 2009-07-09 19:00:57

一般策略是將加載圖像放在div或span標記中，並在顯示時顯示或隱藏它。如果你想最初展示它，只需在jQuery on ready函數的div或span上放置一個jQuery .hide（）函數。

見jQuery docs on show() and hide()

來源

2009-06-05 14:16:11 jonstjohn

或將div的背景圖像設置爲「加載」圖像。那麼你不必做任何事情（除非瀏覽器在加載時繪製一個佔位符） – 2009-06-05 14:18:39

取決於你正在嘗試做的，它不是特別難。下面將顯示一個加載圖像（預先存在），然後加載一些通過ajax檢索到的html，然後完成後，它將隱藏加載圖像。

$(function() { 
    $('#activate').click(function() { 
     $('#loadingImg').show(); 
     $('#whereItGoes').load('url-to-data-to-be-loaded', function() { 
      $('#loadingImg').hide(); 
     }); 
    }); 
});

如果要加載的數據是圖像，然後就有點tricker因爲真正下載的圖像數據之前加載回調可能被調用。在這種情況下，一種策略是在HTML中包含一個腳本，該腳本知道要裝載多少圖像，並且具有一個基本上勾選圖像計數的加載事件處理程序，直到所有圖像下載完畢。我通常會將它與超時結合起來，以防止在圖像數據可用之前未加載加載的處理程序（在這種情況下，它不會觸發）。

來源

2009-06-05 14:19:16 tvanfosson

它通常不外乎：

function onAGivenEvent() { 
    $('someContain').append('<div id="throbber"></div>'); 
    // do some slowthings with a "on complete callback to onComplete 
} 

function onComplete() { 
    $('#throbber').remove(); 
}

但也有一些地方，你甚至都不需要使用Javascript情況。例如在大圖像的情況下。在這種情況下，你可以使用HTML和CSS做到這一點：

img.largeImage { 
    background: url(throbber.gif) center no-repeat; 
}

，並在HTML

<img class="largeImage" src="..." />

來源

2009-06-05 14:23:56 elmuerte

您可以生成裝載機的GIF這裏：http://www.ajaxload.info/

來源

2009-06-05 14:44:58

有這樣做的最簡單的方法而不使用顯示或隱藏。因爲使用show或hide意味着你必須創建一個div，你可以在其中放置你實際不需要的加載鏡像。這是正路

<a href="mypage.php" rel="charger">Load Page 1</a> 

<div id="LoadMe">LoadMe div</div> 

<script> 


    $('a[rel*=charger]').click(function() { 

    $('#LoadMe').html('<img src="images/facebook_style_loader.gif" />'); 

    $('#LoadMe').load($(this).attr('href')); 



    return false; 
}); 




</script>

一旦你做到了這一點，你就不需要添加任何其它額外股利和使用CSS來隱藏它，因爲你將使用顯示或隱藏。同時這也會使加載圖像正好顯示在應該加載的位置，但是如果頁面上有很多內容需要加載，則顯示和隱藏並不總是允許加載圖像顯示在正確的位置。希望有所幫助。

來源

2014-12-26 16:59:30

jquery加載圖像，而元素加載

回答

相關問題