javascript - 如何在后台加载图片，完成后显示页面？

Question

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

但是，问题是，在设置 innerHTML 后图像会单独加载，导致应用程序看起来古怪且缓慢。

我怎样才能准备好我所有的图像，然后在我拥有所有资源时交换 innerHTML？

Answer 1

向图像的 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();
      }
    });