Javascript正在載入圖像

我有一個字段和一個圖像的容器。Javascript正在載入圖像

在此容器中有一個默認圖像。

我想要用戶放置圖像的鏈接，然後提交它，然後將圖像添加到默認圖像的 src屬性。

我的問題，我應該如何加載圖像，並在此期間向用戶顯示進度條，並在加載完成後，隱藏URL。我現在主要關心的是如何加載資源。

現在我已經寫了這個劇本：

jQuery("#logo-file-upload").on("click", function(){ 
// when user clicks the submit button 

    $("#url-logo-progress").show(); // show the progress bar to it 

    var logoUrl = $("#logo-url").val(); // pick up the inserted URL 

    $("#image-width").attr("src", logoUrl); // and put the URL into the src attribute of the image 

});

雖然我需要的是這樣的：

$.imageLoad({ url : "url/to/image.jpg", 
    complete : function(){ 
    alert("upload finished!"); 
    });

我有沒有問題，writen回調和狀態的，但我不知道該怎麼加載資源。

在此先感謝

來源

2014-09-21 Mostafa Talebi

請參閱https：// github。查看此[文章]（http://stackoverflow.com/questions/10863658/load-image-with-jquery-and-append-it-to-the-dom） – Max 2014-09-21 11:04:38

請參閱https：// github。 COM/glenswift/ImageLoader的。也許它可以幫助你 – 2014-09-21 11:31:47

你只是想念onload處理程序。當您在圖像上設置src屬性（DOM圖像元素）時，它會開始加載資源。加載資源時，圖像將觸發onload事件。

所以，與其

jQuery("#logo-file-upload").on("click", function(){ 
// when user clicks the submit button 

    $("#url-logo-progress").show(); // show the progress bar to it 

    var logoUrl = $("#logo-url").val(); // pick up the inserted URL 

    $("#image-width").attr("src", logoUrl); // and put the URL into the src attribute of the image 

});

做

jQuery("#logo-file-upload").on("click", function(){ 
// when user clicks the submit button 

    $("#url-logo-progress").show(); // show the progress bar to it 

    var logoUrl = $("#logo-url").val(); // pick up the inserted URL 

    var image = $("#image-width")[0]; 

    image.onload = function(){alert("upload finished!");} 

    image.src = logoUrl; // and put the URL into the src attribute of the image 

});

讓你處理直接參考圖片DOM元素，而不是用jQuery的參考。當然，當資源被加載時，你將不得不隱藏進度條等等，而不僅僅是提醒消息。

來源

2014-09-21 11:27:30

Javascript正在載入圖像

回答

相關問題