如何在加载页面时同步网站内容答案

【问题标题】：how to synchronize web site content while loading page如何在加载页面时同步网站内容
【发布时间】：2012-01-28 08:28:52
【问题描述】：

我想同步网站，比如首先加载页面时，它会加载内容，然后是图像，然后是 flash 内容，然后是另一个内容。

就像我在 http://gmailblog.blogspot.com/ 看到的一样 [查看图像如何加载]

有什么方法可以实现吗？任何链接或源代码将不胜感激。

【问题讨论】：

标签： javascript html css javascript-framework

【解决方案1】：

您可以通过使用 JS 控制页面上的所有元素来同步加载。例如：在内容之后加载图像的一种策略是：

a) 在您的 html 中，而不是在 src 属性中，在另一个属性中指定图像位置，例如“isrc”。

b) 在您的 onload 回调中（假设您使用的是 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
  }
});

【讨论】：

【解决方案2】：

我看过这个网站。这与 bing 发生的情况相同。如何做到这一点？

在核心 HTML 代码中提供 <img src="loading.gif" id="1"/> 或任何您想要的元素。

Core HTML 完成后，在</body> 标记之前，使用javascript 更改

属性值（例如，img 元素的“src”属性）。请记住，在关闭 body 标记之前，需要将 javascript 写在 HTML 的末尾。浏览器会加载

内容相应地按顺序排列。这可用于实现基于优先级的 HTML 组件加载。

【讨论】：