Question

$.post("service.php", { GetStartpageImages : true },function(data) {

    $.each(data,function(i, value){

        var path = "uploads/thumb_" + value.Filename;

        $('.startpage-images').append(
        '<div class="imagewrapper clearfix">' +
            '<a class="imagelink" href="?p=photo&id=' + value.ID + '">' +
                '<img src="'+ path +'"/></a>' +
                '<div class="imageinfo alpha70">'+ value.UploadTimestamp +'</div>' +
            '</a>' +
        '</div>');

    });
});

How can i show them once they are loaded? $(window).load.. didnt work for me. Thanks

Answer 1

This should do it:

$.post("service.php", { GetStartpageImages : true },function(data) {

    $.each(data,function(i, value){

        var path = "uploads/thumb_" + value.Filename;

        $('.startpage-images').append('<div class="imagewrapper clearfix">' +
        '<a class="imagelink" href="?p=photo&id=' + value.ID + '">' +
            '<img src="'+ path +'"/></a>' +
            '<div class="imageinfo alpha70">'+ value.UploadTimestamp +'</div>' +
        '</a>' +
        '</div>');


        function imgLoadCallback(){
            $('.imagewrapper').show();
        }

        var img = new Image();
        img.addEventListener('load', imgLoadCallback, false);
        img.src = path;


    });
});

The above code assumes that in your css you have .imagewrapper {display:none}. Once the image has been fully loaded, imgLoadCallback() will be called. Even if the user has the image in their cache, it will still be called (immediately, in that case).