CODEWITHSUNDEEP
jqueryhtmlajax
SBK
SBK

Reputation: 45

blinking and flicker when updating div contents from ajax

I am getting data from server. The data contains many images and some other html elements. when replacing the contents of div with the server response, it always flicker within the div.

$('#div').html(serverResponse);

I also followed this method : How to avoid blinking when updating page from ajax but still it is blinking

How can I prevent the blinking.

Upvotes: 4

Views: 6627

Answers (1)

Mark S
Mark S

Reputation: 3799

You can hide '#div' first and wait until all images are loaded, then show '#div'.

$.ajax({
    url: '',
    success: function (serverResponse) {
        $('#div').html(serverResponse).hide();

        var $imgs = $('#div img'), //all images inside '#div'
            len = $imgs.length, 
            imgs_loaded = 0;

        $imgs.load(function(){
            imgs_loaded++;
            if(imgs_loaded == len){
                $('#div').show();
            }
        });
    }
});

Upvotes: 2

Related Questions