Question

I have this code,

$(function () {
    $.post("fetch_data.php?url="+$('#url').val(), { }, function(response){
        var arrValues = [ <?php echo $js_img_arr; ?> ]; //output from php

        $.each(arrValues, function( intIndex, objValue ) {
        var img = new Image(); //creating four Image Elements
            img.src = objValue;
            img.onload = function() {
            if(img.height > 100 && img.width > 200) {
                alert('height: ' + img.height + ' width: ' + img.width);
                //here
            }
            }
        });
    });
});

I am new to jquery/javascript.

Is it possible to get value of how many images loaded at last, let say 10 img have loaded and met the height/width criteria, i want the value of 10 images loaded.

Thank you.

Answer 1

$(function () {
    $.post("fetch_data.php?url="+$('#url').val(), { }, function(response){
        var arrValues = [ <?php echo $js_img_arr; ?> ]; //output from php
        var length = 0; //counter variable 

        $.each(arrValues, function( intIndex, objValue ) {
        var img = new Image(); //creating four Image Elements
            img.src = objValue;
            img.onload = function() {
               length++;   //Increment the counter  by One
               if(img.height > 100 && img.width > 200) {
                   alert('height: ' + img.height + ' width: ' + img.width);
               }
            }

            alert('Number of Images loaded : '+ length); //Total number of Images
        });
    });