Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 332
  • Last Modified:

Detecting if images are loaded with JavaScript or jQuery

Hi E's, I have a project that the image are very important, and can not fail loading of images.
In this sense come here trying to get a solution to detect if the images were loaded.
I have this simple html code with 3 different images:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Imagem Load Detect</title>
<style>
#logo{position: relative; float: left;}
#home{position: relative; float: left;}
#contact{position: relative;}
</style>
</head>
<body>
<div id="logo"><img src="image_folder/logo.jpg" alt="logo"/></div>
<div id="home"><img src="image_folder/home.jpg" alt="home"/></div>
<div id="contact"><img src="image_folder/contact.jpg" alt="contact"/></div>
</body>
</html>

Open in new window

How I do for detect if the images are loaded or not in javascript or in Jquery?

The best regards, JC
0
Pedro Chagas
Asked:
Pedro Chagas
  • 3
2 Solutions
 
leakim971PluritechnicianCommented:
Test page : http://jsfiddle.net/L5S4j/
jQuery(function($) {
    $("#logo img,#home img,#contact img").error(function() {
        var which_one = $(this).attr("alt");
        alert(which_one+" fail");
    });
})

Open in new window

0
 
leakim971PluritechnicianCommented:
if you add a class to each image it's better :

<img class="img_to_check" src="....

jQuery(function($) {
    $(".img_to_check").error(function() {
        var which_one = $(this).attr("alt");
        alert(which_one+" fail");
    });
})

Open in new window

0
 
Pedro ChagasWebmasterAuthor Commented:
Hi @leakim971, I deduce, for both solutions works, the attribute alt must always be present?

~JC
0
 
leakim971PluritechnicianCommented:
No I display alt to let you know which one fail
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now