Reputation: 27038
i have some images that get displayed on a page, some of them don't get loaded and i see that non-loading :) small icon.
i was wondering if there is a way to check if the image loaded successful and if not now to display it
this is my image code:
print "<a href=\"".$domain."/picture.php?s=".$s2."&media_path=".$media_path."\">";
print "<img src=\"".$domain."/".$folder."/".$media_path."\" >";
print "</a>";
what happens is that picture.php looks in the database for the picture name and path and builds the link.
I've looked in the database and the data is there so the images mush be corrupted on the drive, maybe wrong image
So i need some way to check if the image is loaded with success at the end of the script. preferable in php but javascript/jquery is fine also
edit: from the answers i got i did this:
function hideImage()
{
$('.hideme_image').hide();
}
print "<a class=\"hideme_image\" href=\"".$domain."/picture.php?s=".$s2."&media_path=".$media_path."\">";
print "<img onerror=\"hideImage()\" src=\"".$domain."/".$folder."/".$media_path."\" >";
print "</a>";
this hides all images, but not all images are corupted.
any ideas?
thanks
Upvotes: 0
Views: 4138
Reputation: 11028
You can use onload
event on the image
tag. Please have a look at this example from W3Schools.
Upvotes: 2
Reputation: 324610
<img src="image.png" onload="alert('Image loaded');" onerror="alert('Image failed');" />
Something along these lines, is what you're looking for, I think.
Upvotes: 7