如何使用ajax下載圖片，然後將其替換爲div背景？

所以我這裏的概念是，我下載了一個包含所有界面圖像的.jpg或.png（在整個網站中使用的箭頭，按鈕，邊框等）。然後，當我想用一個，我只是做一個div：如何使用ajax下載圖片，然後將其替換爲div背景？

<div id="img_left_arrow"></div>

在CSS

然後，我引用我想要的圖像部分：

.img_left_arrow { 
    background-image:url("path/to/file.png"); 
    background-repeat:no-repeat; 
    background-position:-24px -80px; 
    width:200px; 
    height:400px; 
}

所以這個形象將設在24px之間，80px在file.png下，並且圖像將是200x400px。所以現在div的位置會顯示圖像。

我想要做的第一件事是顯示一個進度條（我將使用一個用於網站上的所有內容），它將顯示圖像加載的進度。這會將圖像加載到隱藏的div中。因此，在此刻得到其他項目，我會做這樣的事情（像所有的JS在現場等使用）（我們將只使用獲得的例子腳本）：

-the空的進度條

<div id="mainLoadProg"></div>

-the隱藏的div的代碼（這將有CSS來隱藏它）

<div id="jscriptCode"></div>

-the PHP獲取代碼的大小（size.php）

echo strlen(json_encode(file_get_contents("path/to/file.js")));

-the實際的代碼（code.php）

echo json_encode(file_get_contents("path/to/file.js"));

-the jQuery代碼運行（客戶端）

$(function() { 
    $('#mainLoadProg').progressbar({ value: 0 }); 
    //get the size first 
    $.ajax({ 
     type: "POST", 
     url: "size.php", 
     dataType: 'json', 
     success: function(recData) { 
      loadPageContent(recData); //run function with data size 
     } 
    }); 
}); 

//function to receive data and show progress bar 
function loadPageContent(size) { 
    $.ajax({ 
     xhr: function() { 
      var xhr = new window.XMLHttpRequest(); 
      xhr.addEventListener("progress", function(evt) { 
       downloadedAmount = evt.loaded; 
       downloadedPercent = (downloadedAmount/size)*100; 
       $('#mainLoadProg').progressbar({ value: downloadedPercent }); 
      }, false); 
      return xhr; 
     }, 
     type: "POST", 
     url: "code.php", 
     dataType: 'json', 
     success: function(recData) { 
      $("#jscriptCode").html(recData); //load the code from the php page into the div 
     } 
    }); 
});

當然是沒有用的加載，只是有一個PHP頁面：

<img src="path/to/file.png">

因爲它只會加載代碼，而不是圖像內容。我想在PHP這樣的東西：

echo json_encode(base64_encode(file_get_contents("path/to/file.png")));

這樣我可以使用strlen來獲取文件大小以及下載。但是，一旦我將base64字符串放入div中，那麼將其作爲div中的背景圖像的最節約資源的方法是什麼？當然，我不能使用「path/to/file.png」，因爲它只是重新下載圖像！

有什麼想法？

來源

2015-09-12 MicWit

我與你在「使用單個圖像作爲多個元素的背景」 - 這是相當常見的，並且被稱爲[css sprites]（https://css-tricks.com/css-sprites） /）。當你開始討論從PHP獲取圖像，或者將圖像加載到隱藏的div中時，你失去了我的部分。只需鏈接到你的CSS，它會加載一次。 – samlev

上面的代碼將執行css sprites部分，但是，我無法使用進度條加載圖像。我需要使用ajax調用來使用進度條。這意味着在移動電話或慢速連接中，用戶可以看到有多少網站已加載。我會在這個問題中增加一個例子。 – MicWit

_「我想要做的第一件事是顯示一個進度條（我將使用一個用於網站上的所有內容），它將顯示圖像加載的進度。」_不是正確解釋問題？圖像加載在哪裏？ – guest271314

如果我正確理解你的問題，這可能會有所幫助！ https://gist.github.com/markmichon/6510134

來源

2015-09-13 10:34:55 WingmanImd

我不知道這應該如何幫助。所有這些代碼似乎做的是使ajax調用正在進行的文本加載和加載gif的div。與通過ajax等傳輸圖像無關。我的代碼已經比WAY更好地工作了，因爲它實際上是一個進度條，而不僅僅是一個動畫gif。 – MicWit

如何使用ajax下載圖片，然後將其替換爲div背景？

回答

相關問題