jQuery doesn´t load images dynamicaly using ajax first time page was loaded

Question

My page doesn´t load images dynamicaly before i reload it.

jQuery:

var riadok = 0;
$(document).ready(function(){
$("#load_more").click(function() {
    for (var i = 0; i < 10; i++)    {
        $.ajax({url:"feed.php",data:"s="+riadok, type: "POST", async: false, success:function(result){
            data = result;
        }});
        if (data != '') {
        var rozdelene = data.split(" "); 

        $("#central").append("<div class='img' id='" + rozdelene[0] + "'><img id='img_" + rozdelene[0] + "' src='" + rozdelene[1] + "'/></div>");
        var w = parseInt($("#img_" + rozdelene[0]).width());
        var h = parseInt($("#img_" + rozdelene[0]).height());
        alert (w + " " + h); // this alert 0 0 so it didn´t foud image width and height
        if (w <= 24) $("#" + rozdelene[0]).remove();
        if (w - 30 > h) { 
                     .... // editing images
        }
        }
        riadok++;
    }
    });
});

after reload everithing works great.

where do you load the image? everything above looks like its bound to the click event. — 4m1r, Mar 13 '14 at 21:14
The images are loading just fine, you just aren't waiting for them to finish loading before you get the width and height. Image loading is asynchronous, so you'll need to use load events on said images. Look up image preloading. — Kevin B, Mar 13 '14 at 21:15
Right, because after a reload the images are cached so they load instantly. — Kevin B, Mar 13 '14 at 21:16
http://stackoverflow.com/questions/476679/preloading-images-with-jquery?rq=1 Not the accepted answer — Kevin B, Mar 13 '14 at 21:19

OdkoPP · Answer 1 · 2014-03-13T23:37:52.543

This is my solution and it works. I load image and then i use setTimeout (to wait till image loads to cache) then i call next function that edit image and next setTimeout makes repeater.

function obrazky starts after button click

var riadok = 0;
var kolko_p = 10;
var kolko = kolko_p;
function obrazky () {
if (kolko > 0) {
    $.ajax({url:"feed.php",data:"s="+riadok, type: "POST", async: false, success:function(result){
        data = result;
    }});
    if (data != '') {
    var rozdelene = data.split(" "); 
    $("#central").append("<div class='img' id='" + rozdelene[0] + "'><img class='lentak' id='img_" + rozdelene[0] + "' src='" + rozdelene[1] + "'/></div>");
    }
    riadok++;
    $("#load_more_div").insertAfter($("div.img:last"));
    setTimeout(function() {posun(rozdelene[0]);}, 50);
    setTimeout(function() {obrazky();}, 50);
    kolko--;
}
else kolko = kolko_p;
};

function posun (img){
$("#mg_" + img ).ready(function() {
    var w = parseInt($("#img_" + img).width());
    var h = parseInt($("#img_" + img).height());
    //alert (w + " " + h);
    if (w <= 24) $("#" + img).remove();
    if (w - 30 > h) {
               ...// img edits
    }
});
}

jQuery doesn´t load images dynamicaly using ajax first time page was loaded

1 Answers1