Created
July 14, 2011 04:12
-
-
Save pixelhandler/1081922 to your computer and use it in GitHub Desktop.
Images loaded or not? Check with JavaScript
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Check if images load properly | |
// returns false if image not loaded | |
function imgOK(img) { | |
if (!img.complete) { | |
return false; | |
} | |
if (typeof img.naturalWidth != "undefined" && img.naturalWidth == 0) { | |
return false; | |
} | |
return true; | |
} | |
// Note: using prototype js library for $, $$ | |
// Test if images load ok | |
var tnLink = $$('.more-views a'); | |
// Hide links to more views when images do no load properly. | |
if (tnLink.length>0) { | |
document.observe("dom:loaded", function() { | |
tnLink.each(function(s, index) { | |
var tnImg = tnLink[index].firstDescendant(); | |
var obj = $(s).firstDescendant(); | |
console.log(tnImg.src + " > is ok : " + imgOK(obj)); | |
if ( imgOK(obj) == false) { | |
console.log('bad image!'); | |
$(s).addClassName('no-display'); | |
} | |
}); | |
}); | |
} | |
/* | |
need to Define a CSS class to hide the link with a bad image : | |
.no-display { | |
display: none; | |
} | |
*/ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment