Question

如何跟踪背景图像加载进度？我关注this article并在下面编写了此代码。

＆＃13;

var progressbar = document.querySelector('#imgload');

var img = document.createElement('img');
img.onloadstart = function(){
	progressbar.innerHTML=0;
};

img.onload = function(){
   document.body.style.backgroundImage='url("High-Res-Wallpaper-HD-For-Desktop.jpg")';
	// img.parentElement.removeChild(img);
};

img.onprogress = function(e){
	if(e.lengthComputable){
		progressbar.innerHTML = e.loaded / e.total * 100;
	}
};

img.onloadend = function(){
	progressbar.innerHTML=100;
};

img.src = 'High-Res-Wallpaper-HD-For-Desktop.jpg';

＆＃13;

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

＆＃13;

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

＆＃13;

但是它没有正常工作。进度应显示图像加载期间的进度值。任何人都可以告诉我如何做到这一点？

Answer 1

我认为图像元素有进展事件。但事实并非如此。根据文章

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 = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
   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');
}

使用javaScript的背景图象装载进展轨道

1 个答案: