Solved

Detecting if images are loaded with JavaScript or jQuery

Posted on 2014-03-26
4
319 Views
Last Modified: 2014-03-26
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
Comment
Question by:Pedro Chagas
  • 3
4 Comments
 
LVL 82

Assisted Solution

by:leakim971
leakim971 earned 500 total points
ID: 39957018
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
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 39957024
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
 
LVL 3

Author Comment

by:Pedro Chagas
ID: 39957088
Hi @leakim971, I deduce, for both solutions works, the attribute alt must always be present?

~JC
0
 
LVL 82

Expert Comment

by:leakim971
ID: 39957105
No I display alt to let you know which one fail
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Requirements JQuery 1.6+ HTML CSS Introduction This article was inspired by an EE question (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28372511.html) on how to make a page show some balloons animate up a page…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

912 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

24 Experts available now in Live!

Get 1:1 Help Now