Question

I’m using javascript to output images, everything works fine in FF and Chrome but in IE only first image is appended on the first time you load the page, only after refreshing the page all images are appended.

Javascript to output images:

  $.getJSON("php/v.php?"+Math.random(),function(data){              
                $.each(data,function(l){
                        if(data[l]['s']==1){                
                             $("#img"+(l+1)).append("<img src='"+data[l]['img']+"' />");
                        }                   
                    });
        });

From IE9 dev tools response from v.php:

[{"img":"https:\/\/www.example.com\/example.jpg","s":"1"},{"img":"https:\/\/www.example.com\/example.jpg","s":"1"},{"img":"https:\/\/www.example.com\/example.jpg","s":"1"}]

So the problem should have been caused by each the elements rather than getJSON.
Found many similar questions on stackoverflow but nothing like that
(http://stackoverflow.com/questions/7785138/each-method-only-applies-to-first-element-in-ie,http://stackoverflow.com/questions/4664190/javascript-each-loop-over-json-only-getting-first-element) but in my case the problem occurs in IE9 also.

Answer 1

I think you can debug in local browser firstly like this:

var data= [{},{},{}];//your data

$.each(data,function(l){
    if(data[l]['s']==1){                
        $("#img"+(l+1)).append("<img src='"+data[l]['img']+"' />");
    }                   
});

//and this way
for(var i=0,l=data.length; i<l; i++){
    if(data[l]['s']==1){                
        $("#img"+(l+1)).append("<img src='"+data[l]['img']+"' />");
    } 
}

//and the third way
for(var i=0,l=data.length; i<l; i++){
    if(data[l]['s']==1){
        var img = new Image();
        img.onload = function(){
            var id = '#img'+(l+1);
            $(id).append(this);
        }
        img.src = data[l]['img'];
    } 
}