4

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.

Community
  • 1
  • 1
SBK
  • 45
  • 1
  • 3
  • What exactly do you mean when you say blinking? I'm trying to figure out if the issue is one of images loading AFTER you put them in the HTML or if it is something else? Do your images have height and width specified in the image tag such that their size will be known before the images are loaded? – jfriend00 Dec 10 '13 at 23:19
  • means, it is showing like re-loading the div section with images and contents. – SBK Dec 10 '13 at 23:20
  • The server response is like this: server sends html containing one main div and several small div's. The small div's contains the image. Now after receiving the response, i am replacing the $('#div').html(serverResponse). But it shows in such a way that images are -reloading like it takes time and blinks and flicker. – SBK Dec 10 '13 at 23:30
  • I think you will have to show us the HTML in `serverResponse` for us to have an idea how you could work around it. If you put height and width attributes on all images, that will cause things to move a lot less as the images are loaded. – jfriend00 Dec 10 '13 at 23:32
  • The HTML in serverResponse is long, not possible to post here. I can email you. And Yes I have put height and width for all images, do I need to put the width and height or not? – SBK Dec 10 '13 at 23:39
  • Putting height and width tells the browser how large the space for the image should be before the image has loaded and prevents jumpy layout when the browser later finds out how large the image is. It is important to prevent relayout every time an image loads. If you can't post the HTML, not sure what else we could do. If you can't put it in your question, then put it in a jsFiddle and link that. – jfriend00 Dec 10 '13 at 23:53

1 Answers1

2

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();
            }
        });
    }
});
Mark S
  • 3,789
  • 3
  • 19
  • 33
  • I see in your comment that you have a 'one main div' maybe it's better to hide-show that div instead. `$('#div').html(serverResponse).find('one main div').hide();` – Mark S Dec 11 '13 at 06:05
  • Thank you so much. Your solution is perfect working. Thanks once again. I create now two div's. Put server response in the hidden div as per your solution and when it is fully loaded, I am hiding the one div and show this hidden div. – SBK Dec 11 '13 at 06:28