javascript - 等待图像加载到下划线模板中

Question

我正在下划线内加载图像。我的容器中有一个类，它有一个加载程序图像，一旦我的图像加载，它就会消失。

<div id="main_container" class="loading">
<% for (i = 0; i <= pages; i++) { %>
      <img src="/image_<%=i%>.jpg" id="image_<%=i%>" />
      <%
          $('#image_'+i).load(function() {
              $('#main_container').removeClass('loading');
          }).each(function() {
            if(this.complete) $(this).load();
          });
      %>
<% } %>
</div>

我无法让它工作，可能是因为 dom 尚未创建。有没有办法让我在下划线模板中加载图像并在图像完全加载时删除类加载？

谢谢，更多的力量

Answer 1

只需在image上使用类loading渲染模板并添加回调onload

<% for (i = 0; i <= pages; i++) { %>
    <img src="/image_<%=i%>.jpg" class='loading' onload='hideLoading(this)' />
<% } %>

在脚本文件中，添加回调

function hideLoading(img) {
    $(img).removeClass('loading');
}