0

アンダースコア テンプレートを使用して JSON データを取り込むサムネイル ギャラリーに取り組んでいます。new 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>
    <%
        });
    %>
    <% } %>
4

0 に答える 0