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

时间:2014-10-24 13:00:37

标签: javascript jquery backbone.js underscore.js underscore.js-templating

我在下划线中加载图片。我的容器中有一个类,它有一个加载器图像,一旦加载了图像,它就会消失。

<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。有没有办法让我在下划线模板中加载图像并在图像完全加载时删除类加载?

谢谢,更有力量

1 个答案:

答案 0 :(得分:2)

只需使用loading上的课程image渲染您的模板,然后添加回调onload

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

在您的脚本文件中,添加回调

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