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

jQuery: Load images sequentially

I want to load images sequentially from an array.  An image should not begin loading until the image before it has fully loaded.
<!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() {

var images2Load = new Array(); 
images2Load[1] = 'http://upload.wikimedia.org/wikipedia/commons/c/ce/Pink_Lady_Slipper_flower_LNoyes.jpg';
images2Load[2] = 'http://upload.wikimedia.org/wikipedia/commons/7/7b/Pic-du-midi-dossau.jpg';
images2Load[3] = 'http://upload.wikimedia.org/wikipedia/commons/6/69/AiguillesArves001.jpg';


// Append first image
// After first image has fully loaded, load next image
// Do this for each item in the array
// Alert DONE! when all images have been loaded


});
</script>
<style type="text/css">
</style>
</head>
<body>
<div id="content"></div>
</body>
</html>

Open in new window

0
hankknight
Asked:
hankknight
  • 2
  • 2
1 Solution
 
leakim971PluritechnicianCommented:
Test page : http://jsfiddle.net/PqN5v/
<!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() {

    var images2Load = new Array(); 
    images2Load[0] = '???? NO PIC ????';
    images2Load[1] = 'http://upload.wikimedia.org/wikipedia/commons/c/ce/Pink_Lady_Slipper_flower_LNoyes.jpg';
    images2Load[2] = 'http://upload.wikimedia.org/wikipedia/commons/7/7b/Pic-du-midi-dossau.jpg';
    images2Load[3] = 'http://upload.wikimedia.org/wikipedia/commons/6/69/AiguillesArves001.jpg';

    function nextImage() {
        var toload = images2Load[ $("img","#content").length + 1 ];
        if( toload != null ) {
            alert("go!");
            $("<img/>").attr({ "src":toload }).appendTo("#content");
            $("img", "#content").load(nextImage);
        }
    }
    
    nextImage();

});
</script>
<style type="text/css">
</style>
</head>
<body>
<div id="content"></div>
</body>
</html>

Open in new window

0
 
leakim971PluritechnicianCommented:
better :
$(document).ready(function() {

    var images2Load = new Array(); 
    images2Load[0] = '???? NO PIC ????';
    images2Load[1] = 'http://upload.wikimedia.org/wikipedia/commons/c/ce/Pink_Lady_Slipper_flower_LNoyes.jpg';
    images2Load[2] = 'http://upload.wikimedia.org/wikipedia/commons/7/7b/Pic-du-midi-dossau.jpg';
    images2Load[3] = 'http://upload.wikimedia.org/wikipedia/commons/6/69/AiguillesArves001.jpg';

    function nextImage() {
        var toload = images2Load[ $("img","#content").length + 1 ];
        if( toload != null ) {
            alert("go!");
            $("<img/>").attr({ "src":toload }).appendTo("#content").load(nextImage);
        }
    }
    
    nextImage();

});

Open in new window

0
 
hankknightAuthor Commented:
Thanks!
0
 
hankknightAuthor Commented:
Here is a slightly modified version that I will use:
// Thanks, leakim971
var images2Load = new Array(); 
images2Load[1] = 'http://upload.wikimedia.org/wikipedia/commons/c/ce/Pink_Lady_Slipper_flower_LNoyes.jpg';
images2Load[2] = 'http://upload.wikimedia.org/wikipedia/commons/7/7b/Pic-du-midi-dossau.jpg';
images2Load[3] = 'http://upload.wikimedia.org/wikipedia/commons/6/69/AiguillesArves001.jpg';
images2Load[4] = 'http://upload.wikimedia.org/wikipedia/commons/6/69/AiguillesArves001.jpg';

$('body').prepend('<div id="preload"></div>')
function nextImage() {
	var toload = images2Load[ $("img","#preload").length + 1 ];
        if( toload ) {
            $('<img alt="" />').attr({ "src":toload }).appendTo("#preload").load(nextImage);
        }
	else {
	alert('Loaded');
	}
}
nextImage();

Open in new window

0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

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