使用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加载背景图片的进度轨迹

回答

相关问题