• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 367
  • Last Modified:

jQuery: Alert when images loaded

How can I trigger an alert when all three images appended by jQuery have been added?
<!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>Demo</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
 $('#content').append('<img src="http://upload.wikimedia.org/wikipedia/commons/c/ce/Pink_Lady_Slipper_flower_LNoyes.jpg" alt="" />');
 $('#content').append('<img src="http://upload.wikimedia.org/wikipedia/commons/7/7b/Pic-du-midi-dossau.jpg" alt=""  />');
 $('#content').append('<img src="http://upload.wikimedia.org/wikipedia/commons/6/69/AiguillesArves001.jpg" alt=""  />');
 alert("All Three Images have Loaded!");
});
</script>
<style type="text/css">
</style>
</head>
<body>
<div id="content"></div>
</body>
</html>

Open in new window

0
hankknight
Asked:
hankknight
1 Solution
 
leakim971PluritechnicianCommented:
test page : http://jsfiddle.net/5scay/1/
<!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>Demo</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript">
var img = 0;
$(document).ready(function() {
 $('#content').append('<img src="http://upload.wikimedia.org/wikipedia/commons/c/ce/Pink_Lady_Slipper_flower_LNoyes.jpg" alt="" />');
 $('#content').append('<img src="http://upload.wikimedia.org/wikipedia/commons/7/7b/Pic-du-midi-dossau.jpg" alt=""  />');
 $('#content').append('<img src="http://upload.wikimedia.org/wikipedia/commons/6/69/AiguillesArves001.jpg" alt=""  />');

    $("img","#content").load(function(e) {
//        alert( $(this).attr("src") + " loaded" );
        if( ++img==3 ) alert("All Three Images have Loaded!");;
    })
 
});
</script>
<style type="text/css">
</style>
</head>
<body>
<div id="content"></div>
</body>
</html>

Open in new window

0

Featured Post

[Webinar] Database Backup and Recovery

Does your company store data on premises, off site, in the cloud, or a combination of these? If you answered “yes”, you need a data backup recovery plan that fits each and every platform. Watch now as as Percona teaches us how to build agile data backup recovery plan.

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