如何添加一個加載「微調」

我有一些非常簡單的JS（我還在學習），它基本上讀取表單的元素並創建一個傳遞給映像服務器的URL字符串，然後呈現圖片。如何添加一個加載「微調」

var imgURL = "site.com/path/to/image"; 
var product = "BirthdayCard_End" + "?&"; 
var page = 2; 
var format; 
var data; 

function setPage(inputID) 
    { 
     page = inputID; 
     setJPG(); 
    } 

function FormValues() 
    { 
     var str = ''; 
     var elem = document.getElementById('form1').elements; 
     for(var i = 0; i < elem.length; i++) 
     { 
      str += "$" + elem[i].id + "=" + elem[i].value + "&"; 
     } 
     data = str;   
    } 

function genPDF() 
    { 
     var format = "fmt=pdf&mediaMargin=48&bleedMargin=48&printerMark=1,1,1,1,1,Illustrator,.25,1"; 
     fullURL = imgURL + product + data + format; 
     window.open(fullURL);  

    } 

function setJPG() 
    { 
     FormValues(); 
     var format = "imageRes=200&fmt=jpg&wid=550&page=" + page; 
     fullURL = imgURL + product + data + format; 
     document.getElementById('lblValues').innerHTML = fullURL; 
     document.getElementById('image').src = fullURL; 
    }

我試圖找出如何展示一個簡單的裝載機像這樣（http://fgnass.github.com/spin.js/#v1.2.5）。我怎麼向setJPG（）函數添加一些東西，以便它在每次初始化時彈出加載程序，然後在加載圖像後消失？

來源

2012-05-31 thindery

您已經添加的jQuery的標籤，但使用是你實際上jQuery，你想要一個jQuery的答案？ –

jquery或只是JavaScript是好的。看起來這個插件可以兼得。 – thindery

建議的解決方案

對於圖像，使用「加載微調器」是有問題的。見下文。

而不是一個微調，首先發送低分辨率（考慮B & W）的圖像。 This SO question tells how.

紗廠的圖像加載

與展示，而你等待要顯示的圖像的微調的一個問題是，瀏覽器不可靠告訴JS當圖像加載。

而且如果它不火，那麼留給你看微調永遠...

請參閱該文檔爲jQuery load event - 負載事件時的

注意事項與圖像一起使用

開發人員嘗試使用.load（）快捷方式解決的常見挑戰是在圖像（或圖像集合）完全加載時執行函數。有幾個已知的警告與此應該注意。它們是：

這並不一致，也不可靠地工作，跨瀏覽器的

它不正確的WebKit如果圖像的src設置爲相同的SRC像以前

它不火正確地泡了DOM樹

可以停止火已經生活在瀏覽器的緩存圖片

來源

2012-05-31 15:04:54

微調的原因只是讓客戶知道圖像正在更新。渲染的圖像實際上非常快。每次調用setJPG時只顯示微調量爲秒的微調可能會更好，只是爲了給出「印象」。你怎麼看？ – thindery

是的，這說的是一個定時彈出「工作......」可能是有用的。我在我的一些應用程序上完成了它。但是，如果整個事情非常快，那麼仔細想想爲什麼它需要在第一位。您也可以顯示一條標題類型的消息「已更新」，然後消失。 Google在Gmail和其他地方使用這種類型的反饋。 –

感謝您的想法和反饋拉里k。 – thindery

最簡單的方法是創建兩個div。一個div與微調器覆蓋div的內容，然後當頁面完成加載後顯示帶有內容的div。

在這個例子中，我在window.load上使用它，所以你可能需要修改事件在圖像加載。其餘的應該可以正常工作。

CSS：

#preloader { 
position:absolute; 
top:0; 
left:0; 
width:100%; 
height:100%; 
background:white; 
opacity:0.3; 
z-index:2; 
} 
#spinner_container { 
position:absolute; 
width:100%; 
top: 50%; 
left:0px; 
height:1px; 
overflow:visible; 
opacity: 1; 
background: transparent; 
} 
#spinner { 
width: 31px; 
height:31px; 
margin-left:-15px; 
position:absolute; 
top:-15px; 
left:50%; 
display:block; 
}

HTML

<div id="preloader"> 
<div id="spinner_container"> 
<img id="spinner" src="/content/images/spinner_squares_circle.gif" alt="" /> 
</div> 
</div> 
<div id="wrapper"> 
content 
</div>

jQuery的

$(window).load(function(){ 

    $('#preloader').fadeOut(100, function() { 
       $('body').css('overflow','auto'); 
       $(this).remove(); 
    }); 
});

來源

2012-05-31 14:57:24

會和$（文件）。就緒，而不是window.load –

OP想要加載圖像時知道去。所以需要使用負載。但是，應該在圖像元素上使用加載。加上可能並不總是火，離開微調。參見[加載事件文檔（http://api.jquery.com/load-event/） –

對不起，掠過你的答案。我正在思考如何讓文檔準備好隱藏加載圖形以及在需要時調用它的函數，這是我的錯誤。 –

你們正在使這種方式比它需要的更復雜。把你的圖片放在div中，並將div的背景設置爲動畫gif。

<div style="background-image: url('spinner.gif')"><img src='bigImage.jpg'></div>

無需使用任何JS可言，所以圖像只能加載在背景微調。

來源

2016-04-23 00:17:12 Chris

-2

紡紗GIF只需添加到圖表DIV，它會自動由谷歌圖表加載時更換。與此類似，「」

來源

2016-08-15 19:30:53 Swati

如果您正在使用Spectre css，你可以添加這個div添加一個微調：

<link href="https://cdnjs.cloudflare.com/ajax/libs/spectre.css/0.3.1/spectre.min.css" rel="stylesheet"/> 
 

 
<div class="loading"></div>

來源

2017-08-22 12:13:05 Thomas

如何添加一個加載「微調」

回答

相關問題