バックグラウンド画像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私はメモリリークを防止しようとしていました。その行を修正してみましょう。 –

image要素にprogressイベントがあると考えました。しかし、それはしません。記事によると

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を使用して進捗トラックをロードしています

答えて

関連する問題