在下划线模板中的图像预加载器

时间:2013-10-13 04:29:32

标签: jquery json underscore.js

我正在开发一个缩略图库,使用下划线模板填充JSON数据。只想使用新的Image()对象为缩略图图像添加图像预加载器。

请在我出错的地方纠正我,因为以下代码对我不起作用。还建议我的方法是否正确。

<!-- Template for Thumbnail GRID -->
<script type="text/template" id="grid-listing-template">
    <% if(!_.isUndefined(data)) {
        var images = [];
        _.each(data, function(result, i) {
    %>
        <div class="col-6 col-sm-6 col-lg-4 item">
            <div class="thumbnail">
                <a href="<%=result.href%>" title="<%=result.title%>">
                    <div class="loader" style="display:block; height: 100px;"></div>
                    <img class="img-responsive thumb" src="" alt="<%=result._alt%>" style="display: none;">
                    <%
                        images[i] = new Image();
                        images[i].src = result._src;
                        images[i].onload = function() {
                            $('.thumb').attr('src',result._src);
                            $('.thumbnail .loader').remove();
                        };
                    %>
                    <div class="caption">
                        <p><%=result.caption%></p>
                    </div>
                </a>
            </div>
        </div>
    <%
        });
    %>
    <% } %>

0 个答案:

没有答案