how to synchronize web site content while loading page

问题

I want to synchronize web site like when page load first it will load content then images then flash content then another content.

Like i have seen the same at http://gmailblog.blogspot.com/ [ see how images load ]

Is there any way to achieve? Any link or source code would be appreciated.

回答1:

I seen the web site. This is the same thing that happens with bing. How to do this ?

In the core HTML code give the <img src="loading.gif" id="1"/> or whatever element you want.

When the Core HTML is done, before the </body> tag, use javascript to change the

attributes values (for eg. "src" attribute of the img element). Remeber the javascript need to be written at the end of the HTML before closing the body tag. The browser will load the

contents accordingly in sequence. This can be used to achieve priority based loading of HTML components.

回答2:

You can synchronize loading of all elements on your page by controlling it using JS. For ex: one strategy to load images after content would be:

a) In your html, instead of in the src attribute, specify the image location in another attribute, say 'isrc'.

b) Inside your onload callback (assumes you're using jQuery):

var loadCounter = 0;
$('img').each(function() {
  if($(this).attr('isrc')) {
    this.onload = function() {
      loadCounter++;
      if($('img[isrc]').length == loadCounter) {
        // .. proceed to loading other stuff like flash etc..
      }
    }
    $(this).attr('src', $(this).attr('isrc')); // load the image
  }
});

来源：https://stackoverflow.com/questions/8642142/how-to-synchronize-web-site-content-while-loading-page