如何在加載大圖像時顯示加載圖像？

作爲Orkut在用戶相冊中查看照片時的示例，在照片完全加載之前，會在照片上顯示加載圖像。

我需要實現該功能。

我的問題是如何實現該功能？是否可以不使用JQuery？

請幫忙。

2009-10-14 Himadri

這是一個基本的技術，您可以在擴大與

<html> 
<head> 
    <title>Test Page</title> 
    <script type="text/javascript"> 
    onload = function() 
    { 
     // Create an image object. This serves as a pre-loader 
     var newImg = new Image(); 

     // When the image is given a new source, apply it to a DOM image 
     // after it has loaded 
     newImg.onload = function() 
     { 
     document.getElementById('test').src = newImg.src; 
     } 

     // Set the source to a really big image 
     newImg.src = "http://apod.nasa.gov/apod/image/0710/iapetus2_cassini_big.jpg";  
    } 
    </script> 
</head> 

<body> 

<img id="test" src="http://upload.wikimedia.org/wikipedia/commons/4/42/Loading.gif" > 

</body> 
</html>

來源

2009-11-02 16:02:05

絕對值得賞金的答案。工作和解釋得很好。 – matm 2011-05-24 10:08:31

用div（或任何你想要的）包裹你的圖像，並將其背景圖像設置爲動畫gif或任何你想要的加載圖像。當圖像加載完成後，它會掩蓋背景圖像。容易，可以在任何你想要的地方重複使用。

<div class="loading"> 
    <img src="bigimage.jpg" alt="test" /> 
</div>

CSS：

.loading{ 
    background:transparent url(loadinggif.gif) center center no-repeat; 
}

來源

2009-10-14 05:07:54 NinjaBomb

包裝div不是必需的。您可以將背景應用於圖像。此外，如果圖像是透明的，加載圖像將在 – 2009-10-14 06:46:39

下方可見。是否有任何其他出路使用asp.net ajax或簡單的JavaScript nto JQuery。請幫忙。 Thaks回覆你。 – Himadri 2009-10-14 10:03:14

@Himadri - 爲什麼你想讓它更復雜？ – Skilldrick 2009-10-14 11:38:52

你可以使用jQuery Lazy Loading plugin。它允許您指定加載圖像並延遲加載大圖像，直到它們滾動到視圖中。

來源

2009-10-14 05:16:23

是否有任何其他出路使用asp.net ajax或JavaScript而不是JQuery？感謝您的職位。 – Himadri 2009-10-14 06:00:59

編輯：顯然，這已被棄用。這裏沒什麼好看的，離開。

沒有JavaScript或CSS是必要的。只需使用img元素的內置但很少聽到的lowsrc屬性。

<img src="giant-image.jpg" lowsrc="giant-image-lowsrc.gif">

的基本想法是，你創建你的正常圖像的額外的非常的壓縮，可能是黑色和白色版本。它首先被加載，當全分辨率圖像被下載時，瀏覽器會自動替換它。最好的部分是你不必做任何事情。

看看這裏：http://www.htmlcodetutorial.com/images/_IMG_LOWSRC.html

來源

2009-10-14 06:43:52

我希望我能給這更多upvotes。 – eyelidlessness 2009-10-14 06:45:17

我對這個答案很着迷，因爲我從來沒有聽說過'lowsrc'屬性。我做了谷歌搜索，並遇到了這個：http://blog.throbs.net/2009/05/27/Hey+JLo+Where+Did+LowSRC+Go.aspx它似乎聲明，'lowsrc'已被棄用一會兒。我發現'lowsrc'的唯一來源/頁面非常古老。我也無法使用任何頁面進行測試（並且實際上看到了lowsrc的實際運行情況）。也許我的連接太快了。 – Jim 2009-10-14 06:59:47

從我在網上搜索，似乎這個屬性可以通過使用JavaScript黑客入侵。如果通過http://validator.w3.org/運行帶有image lowsrc屬性的html源代碼，它將顯示'lowsrc'不是有效的屬性。 – Jim 2009-10-14 07:16:26

前段時間我做了這樣的事情了類似的問題做更精細的東西：

<script> 
    function imageLoaded(img) { 
     document.getElementById('loadingImage').style.visibility='hidden'; 
     img.style.visibility='visible'; 
    } 
</script> 
... 
<img id='loadingImage' src='loading.gif'/> 
<img src='bigImage.jpg' style='visibility:hidden;' onload='javascript:imageLoaded(this);'/>

我認爲這種方法有一些有用的優點：

加載的圖像被隱藏。想象一下，你的大圖像並不像你期望的那麼大......
你可以在javascript函數中做一些額外的事情。在我的情況下，我根據其尺寸拉伸圖像的寬度，高度或兩者。

來源

2009-11-04 17:42:43 sinuhepop

如何在加載大圖像時顯示加載圖像？

回答

相關問題