WaBis

walter.bislins.ch

JavaScript: Image.onload und Image.complete Test

Beschreibung siehe JavaScript: Image, onload, complete, Cross-Browser.

Beachte, wie sich der Zustand der Flags complete und die Reihenfolge der Callbacks ändern, wenn die Seite erneut geladen wird (F5), wenn also die Bilder bereits im Cache des Browsers sind. Drücke Ctr+F5 um die Bilder erneut von der Website zu laden und beachte die Änderungen in der Ausgabe des Testprogrammes.

Ausgabe des Testprogrammes

Code des Testprogrammes


<img href="Katzensee.jpg">

<img href="Spacetime.png">

<img href="nonexistent.jpg">

<jscript>

var origCBcalled = [ false, false, false ];
var helperCBcalled = [ false, false, false ];

function Test() {
  var imgList = document.images;
  for (var i = 0; i < imgList.length; i++) {
    ImageOnLoadTest( imgList[i], i );
  }
}

function Report() {
  var n = 0;
  for (var i = 0; i < helperCBcalled.length; i++) {
    if (helperCBcalled[i]) n++;
  }
  if (n < 3) return;

  setTimeout( function(){
    var n = 0;
    Out('<br><b>Test Result:</b>');
    for (var i = 0; i < origCBcalled.length; i++) {
      if (!origCBcalled[i]) {
        Out('<b>Callbacks <b>onload</b> or <b>onerror</b> for original image '+i+' not called within 3 sec.</b>');
      } else { n++ }
    }
    for (var i = 0; i < helperCBcalled.length; i++) {
      if (!helperCBcalled[i]) {
        Out('<b>Callbacks <b>onload</b> or <b>onerror</b> for helper image '+i+' not called within 3 sec.</b>');
      } else { n++ };
    }
    if (n == 6) Out('<b>All callbacks <b>onload</b> or <b>onerror</b> for original and helper images called.</b>');
  }, 3000 );
}

function ImageOnLoadTest( img, i ) {
  Out( 'ImageOnLoadTest start: for Image ' + i );

  if (img.complete) { 
    Out('&nbsp; original image '+i+': <b>complete</b> flag was true') 
  } else { 
    Out('&nbsp; original image '+i+': <b>complete</b> flag was false'); 
  }
  img.onload = function(){ 
    Out('&rArr; callback <b>onload</b> for original image '+i+' was called'); 
    origCBcalled[i] = true;
  };
  img.onerror = function(){ 
    Out('&rArr; callback <b>onerror</b> for original image '+i+' was called'); 
    origCBcalled[i] = true;
  };
  
  var helperImg = new Image();
  helperImg.onload = function(){ 
    Out('&rArr; callback <b>onload</b> for helper image '+i+' was called'); 
    helperCBcalled[i] = true;
    Report();
  };
  helperImg.onerror = function() { 
    Out('&rArr; callback <b>onerror</b> for helper image '+i+' was called'); 
    helperCBcalled[i] = true;
    Report();
  };
  helperImg.src = img.src;
  if (helperImg.comlete) { 
    Out('&nbsp; helper image '+i+': <b>complete</b> flag was true') 
  } else { 
    Out('&nbsp; helper image '+i+': <b>complete</b> flag was false'); 
  }

  Out( 'ImageOnLoadTest end<br>' );
}

Test();

function Out(txt) {
  var div = document.getElementById('out');
  div.innerHTML = div.innerHTML + '<br>' + txt;
}

xOnDomReady( function(){ Out('&rArr; xOnDomReady called: DOM is now ready (HTML loaded, images not loaded yet)'); });
xOnLoad( function(){ Out('&rArr; xOnLoad called: DOM and images are loaded now'); });

</jscript>

Testbilder

More Page Infos / Sitemap
Created Samstag, 2. Mai 2015
Scroll to Top of Page
Changed Donnerstag, 12. November 2015