jquery get last each if value

Question

Hello,

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

Hi,

I dont think var arrValues = [ <?php echo $js_img_arr; ?> ]; will work as it is inside the callback function of the $.post method. the code inside

function(response){
  ....
}

will execute only after the ajax request is completed and a response is available which can be accessed using the 'response' parameter. you can decide in what form you want this response (xml, json , html, text etc) and then create the array arrValues accordingly.

What is your response btw. what are you echo-ing in the fetch_data.php file ?

Answer 2

You should use a variable to count.

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

       $.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);
                if(imgCount % 10 === 0){
                  // 10th image loaded
                }

                imgCount++;
              }
           }
       });
   });
});

Answer 3

$(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
        });
    });