使用javaScript加載背景圖片的進度軌跡

如何跟蹤背景圖片加載進度？我正在關注this article，並在下面寫下這段代碼。使用javaScript加載背景圖片的進度軌跡

var progressbar = document.querySelector('#imgload'); 
 

 
var img = document.createElement('img'); 
 
img.onloadstart = function(){ 
 
\t progressbar.innerHTML=0; 
 
}; 
 

 
img.onload = function(){ 
 
    document.body.style.backgroundImage='url("High-Res-Wallpaper-HD-For-Desktop.jpg")'; 
 
\t // img.parentElement.removeChild(img); 
 
}; 
 

 
img.onprogress = function(e){ 
 
\t if(e.lengthComputable){ 
 
\t \t progressbar.innerHTML = e.loaded/e.total * 100; 
 
\t } 
 
}; 
 

 
img.onloadend = function(){ 
 
\t progressbar.innerHTML=100; 
 
}; 
 

 
img.src = 'High-Res-Wallpaper-HD-For-Desktop.jpg';

.container{ 
 
    margin: 0 auto; 
 
    width: 900px; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title>Background image load progress</title> 
 
</head> 
 
<body> 
 

 
\t <div class="container"> 
 
\t <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
 
\t tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
 
\t quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
 
\t consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
 
\t cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
 
\t proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
\t </div> 
 

 
\t <div class='progress'> 
 
\t \t percentage of image load : <span id='imgload'> </span> 
 
\t </div> 
 
</body> 
 
</html>

但它不能正常工作。進度應顯示圖像加載期間的進度值。任何人都可以給我一些想法如何做到這一點？

來源

2016-09-26 Md. Al-Amin

你是什麼意思_「它不能正常工作」_？ – Rayon

'img'元素永遠不會附加到'DOM'，你怎麼能刪除它？ – Rayon

@Rayon我試圖防止內存泄漏。讓我修正這條線。 –

我以爲圖像元素有進展事件。但事實並非如此。根據文章

HTML圖像元素缺少進度事件。 Web平臺團隊 Adobe建議在HTML5規範中添加圖像進度事件，並在瀏覽器中實現它們。

所以我用他的解決方案來回答我自己的問題。

var request; 
var progressbar = document.querySelector('#imgload'); 

function loadImage(imageURI) 
{ 
    request = new XMLHttpRequest(); 
    request.onloadstart = showProgressBar; 
    request.onprogress = updateProgressBar; 
    request.onload = showImage; 
    request.onloadend = hideProgressBar; 
    request.open("GET", imageURI, true); 
    request.overrideMimeType('text/plain; charset=x-user-defined'); 
    request.send(null); 
} 

function showProgressBar() 
{ 
    progressbar.innerHTML = 0; 
} 

function updateProgressBar(e) 
{ 
    if (e.lengthComputable){ 
     progressbar.innerHTML = e.loaded/e.total * 100; 
    } 
} 

function showImage() 
{ 
    var imageElement = "data:image/jpeg;base64," + base64Encode(request.responseText); 
    document.body.style.backgroundImage='url("' + imageElement + '")'; 
} 

function hideProgressBar() 
{ 
    progressbar.innerHTML = 100; 
} 

// This encoding function is from Philippe Tenenhaus's example at http://www.philten.com/us-xmlhttprequest-image/ 
function base64Encode(inputStr) 
{ 
    var b64 = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz/="; 
    var outputStr = ""; 
    var i = 0; 

    while (i < inputStr.length) 
    { 
     //all three "& 0xff" added below are there to fix a known bug 
     //with bytes returned by xhr.responseText 
     var byte1 = inputStr.charCodeAt(i++) & 0xff; 
     var byte2 = inputStr.charCodeAt(i++) & 0xff; 
     var byte3 = inputStr.charCodeAt(i++) & 0xff; 

     var enc1 = byte1 >> 2; 
     var enc2 = ((byte1 & 3) << 4) | (byte2 >> 4); 

     var enc3, enc4; 
     if (isNaN(byte2)) 
     { 
      enc3 = enc4 = 64; 
     } 
     else 
     { 
      enc3 = ((byte2 & 15) << 2) | (byte3 >> 6); 
      if (isNaN(byte3)) 
      { 
       enc4 = 64; 
      } 
      else 
      { 
       enc4 = byte3 & 63; 
      } 
     } 

     outputStr += b64.charAt(enc1) + b64.charAt(enc2) + b64.charAt(enc3) + b64.charAt(enc4); 
    } 

    return outputStr; 
} 

window.onload = function(){ 
    loadImage('High-Res-Wallpaper-HD-For-Desktop.jpg'); 
}

來源

2016-09-26 08:32:38

使用javaScript加載背景圖片的進度軌跡

回答

相關問題