2

我有一个 ajax Web 应用程序，每 10 秒我从服务器请求内容。服务器发回带有图像链接的 HTML。现在，我将 div 标签的 innerHTML 设置为从服务器返回的 HTML，它会动态更新网页而不重新加载整个页面。

然而，问题是，图像在设置 innerHTML 后单独加载，导致应用程序看起来很时髦而且很慢。

当我拥有所有资源时，如何准备好所有图像然后交换 innerHTML？

4

2 回答 2

3

向图像的 DOM 添加一个属性（或数据属性），然后使用 jQuery 监听“loaded”事件，将加载的属性更改为 true。然后验证队列中是否有静止图像，如果没有则执行完整过程的回调。

标记：

<img src="img/1.png" class="imgToLoad" loaded="false" />
<img src="img/2.png" class="imgToLoad" loaded="false" />
<img src="img/3.png" class="imgToLoad" loaded="false" />
<img src="img/4.png" class="imgToLoad" loaded="false" />

伪代码：

   function allImagesLoaded(){
      $('#yourmaindiv').show();
      console.log('images loaded!');
    }
    $('img.imgToLoad').load(function(){
      $(this).attr('loaded', 'true');
      if( $('img.imgToLoad[loaded=false]').length === 0 ){
        allImagesLoaded();
      }
    });
于 2012-07-24T20:18:51.003 回答
2

对于您的图像：

JavaScript

$(function () {
    preload();

    function preload() {
        var imageObj = new Image(),
            images = [];

        images[0] = 'img/1.png';
        images[1] = 'img/2.png';
        images[2] = 'img/3.png';
        images[3] = 'img/4.png';
        images[4] = 'img/5.png';

        for (var i = 0; i < images.length; i++) {
            imageObj.src = images[i];
        }
    }
});

HTML

<body>
    ....

    <!--[if IE]>
        <div id="preload">
            <img src="img/1.png" width="1" height="1" alt="" />
            <img src="img/2.png" width="1" height="1" alt="" />
            <img src="img/3.png" width="1" height="1" alt="" />
            <img src="img/4.png" width="1" height="1" alt="" />
            <img src="img/5.png" width="1" height="1" alt="" />
        </div>
    <![endif]-->
</body>

用于 IE 的 CSS

#preload {
   position: absolute;
   overflow: hidden;
   left: -9999px; 
   top: -9999px;
   height: 1px;
   width: 1px;
}
于 2012-07-24T20:06:08.247 回答