如何顯示進度圖標，直到所選圖像完全加載？

我有一個分類的網站使用asp.net設計在那裏用戶可以發佈廣告，他們也添加了5張圖片到廣告。我使用文件上傳控制，一切工作正常。如何顯示進度圖標，直到所選圖像完全加載？

當我保存它時，我將它們保存到兩個文件夾中。

1）全部圖像

2）縮略圖

所以，當有人瀏覽廣告時，他會看到大的圖像，並在下面，他會看到這是關係到廣告（縮略圖其他圖片）

我這樣做是爲了減少頁面加載時間+帶寬。所以如果用戶需要看到完整的圖像，他必須點擊縮略圖。

在這裏，我附上預覽

所以這是縮略圖的HTML代碼

<img src='/Images/Thumbnail/{0}' data-url='/Images/Full/{0}' id='{0}' onclick='loadFullImage(this)'/>

這是腳本，設置完整的圖像路徑當有人點擊縮略圖

<script type="text/javascript"> 
    function loadFullImage(ctrl) { 
     var url = ctrl.getAttribute("data-url"); 
     var imgFull = document.getElementById("imgFull"); 
     imgFull.src = url; 

    } 
</script>

希望你現在明白髮生了什麼。這工作正常。

現在的問題是（其實我需要一個調整）當有人點擊縮略圖時，需要一段時間來加載圖像。它不是一個錯誤。它的加載時間。所以我想顯示一個進度圖像，直到完全加載。怎麼做？還是有辦法減少這種延遲？

請注意，當有人點擊縮略圖圖像時，服務器端不會發生回發事件。只有它會查找完整的圖像文件夾。

來源

2017-01-11 Sylar

使用AJAX爲此，簡單的創建一個加載GIF一個div並將其設置爲display:none

<div id="loading"><img src="url..." /></div>

然後CLL div時用戶點擊使用該

$('loading').show();

的loadFullImage功能展示並在圖像完成加載時，取消設置div

$('loading').hide();

你的功能將會是這樣的

<script type="text/javascript"> 

    function loadFullImage(ctrl) { 
     $('loading').show(); 
     var url = ctrl.getAttribute("data-url"); 
     var imgFull = document.getElementById("imgFull"); 
     imgFull.src = url; 
     $('loading').hide(); 

    } 
</script>

來源

2017-01-11 11:49:14

Bilal，請你用我的功能更新答案。把那些繩子放在哪裏？ :)謝謝 – Sylar

使用'$（'loading'）。show（）;'在第一行調用函數並在函數結尾調用這行'$（'loading'）。hide（）;'並顯示加載圖像的div你想要顯示加載圖像 –

請看現在編輯答案 –

嘗試異步加載你的圖像，與jQuery。這已經得到了答覆，並應該在這裏幫助你。基本想法是啓動異步請求並顯示加載圖標。完成事件觸發後，請刪除加載圖標，因爲圖像像素應完全加載。

https://stackoverflow.com/a/4285068/1143300

來源

2017-01-11 11:49:30 angabriel

@Bilal回答正確！

但我會改變行！

事情是這樣的：

if ($('#imgFull').load()) { 
     $('loading').hide(); 
    }

我一直使用的方法LOAD隱藏「裝載塊」只是當圖像完全地加載。

來源

2017-01-11 14:07:48

如何顯示進度圖標，直到所選圖像完全加載？

回答

相關問題