Dynamically Load Images: jQuery Looping

Advertisement:

Video tutorial to demonstrate loading of images dynamically using jQuery looping method: .each()

In this tutorial, we take 5 div elements in our html document, and then using each() method, we loop through each of these div tags and insert images in each one of them.

HTML code
index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<html>
<head><title>Dynamically load images: jQuery Looping</title>
<style type="text/css">
div  {
 
display: inline;
padding: 10px;
 
}
 
</style>
 
</head>
<body>
 
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
 
 
<script src="script/jquery-1.8.1.min.js" type="text/javascript"></script>
<script src="script/my_script.js" type="text/javascript"></script>
</body>
</html>

Here we have 5 div tags, and we have applied some cascading stylesheet property to it.

jQuery code
my_script.js

1
2
3
4
5
6
7
$(document).ready( function() {
 
 $("div").each( function(i) {
  $(this).append("<img src='images/"+(++i)+".png' width='79' height='79' />");	
 });
 
});

Here we select all the div tags and loop through each one of them using each() method.
Using this selector, we append image tag with a image to each div present in our html document.

+ is concatenation operator.
i++ is a shorthand notation of i = i + 1;

++i is pre increment.
i++ is post increment.

Similarly,
– -i is pre decrement.
i- – is post decrement.

Ex:

let i = 1;

display or echo ++1; results in 2. after display i = 2;
display or echo i++; results in 1. after display i = 2;

folder-structure-jquery

Note: We have our images inside a folder called images.

Video Tutorial: Dynamically Load Images: jQuery Looping


You need to a flashplayer enabled browser to view this YouTube video

YouTube Link: http://www.youtube.com/watch?v=r-7ljuuljgY [Watch the Video In Full Screen.]



each() method is often used in all the application level programming logic.
We would also use a static method $.each() when we encounter ajax in jQuery. We would explain it in further videos. Stay subscribed to our blog and youtube channel and please like and share our tutorials with your friends.

Advertisements

2 thoughts on “Dynamically Load Images: jQuery Looping”

  1. Hello This script now randomises an image starting with number 0.png which is located in the img folder.. you can obviously control the amount of images by writing a div tag for each image needed.. a nice way to do this would be by some other loop method rather than writing in this case lots of empty divs so this code can be improved for readability reasons.

    $(document).ready (function(){
    (function($) {
    $.fn.shuffle = function() {
    var m = this.length, t, v;

    while (m) {
    v = Math.floor(Math.random() * m–);

    t = this[m];
    this[m] = this[v];
    this[v] = t;
    }

    return this;
    };
    }(jQuery));

    jQuery(function($) {
    $(‘div’).shuffle().each(function(i) {

    $(this).append(” “);

    });

    });
    });

Leave a Reply

Your email address will not be published. Required fields are marked *