jquery each and onload problem

Question

Hi,

I have this following code

$(function () {
    $.post("fetch_data.php?url="+$('#url').val(), { }, function(response){
        var arrValues = [ "path/to/img1", "path/to/img2", "path/to/img3", "path/to/img4" ]; //output from php
        var img = new Image();
        $.each(arrValues, function( intIndex, objValue ) {
            img.src = objValue;
            img.onload = function() {
            alert('height: ' + img.height + ' width: ' + img.width);
            }
        });
    });
});

I am new in javascript/jquery, this code only return last("path/to/img4") height/width of image.

How do i make it return all image and width of the array?

Answer 1

As the parameter img is defined outside your loop, it will only point to the last img u create..

try to declare the img inside the $.each loop...

and replace the img with this in the alert..

Answer 2

I guess you have to create four image Elements... you have to modify your code a bit

try the bellow code,

$(function () {
    $.post("fetch_data.php?url="+$('#url').val(), { }, function(response){
        var arrValues = [ "path/to/img1", "path/to/img2", "path/to/img3", "path/to/img4" ]; //output from php

        $.each(arrValues, function( intIndex, objValue ) {
        var img = new Image(); //creating number of Image Elements equal to arrValues length
            img.src = objValue;
            img.onload = function() {
            alert('height: ' + img.height + ' width: ' + img.width);
            }
        });
    });
});