在 Backbone 中使用延迟加载答案

【问题标题】：Using lazy loading with Backbone在 Backbone 中使用延迟加载
【发布时间】：2023-04-02 15:16:01
【问题描述】：

我正在尝试在主干应用程序中使用此lazy loading plugin，我调整了模板以与插件一起使用并调用了插件脚本，但它不起作用。这是jsfiddle：http://jsfiddle.net/swayziak/9R9zU/27/

模板：

<script id="bookTemplate" type="text/template">
    <img src="https://www.amrms.com/ssl/iftafoundation/bluepay/Images/Loading_Animation.gif" data-src="<%= image %>"/>
    <h2 class="bookTitle"><%= title %><h2>
</script>

文档上的脚本准备好了：

$(document).ready(function() {
    $("img").unveil();
});

我不知道我的代码有什么问题。

【问题讨论】：

标签： javascript backbone.js lazy-loading

【解决方案1】：

首先，您在小提琴中使用了错误的插件路径。它不起作用的另一件事与您放置插件初始化的位置有关。您在准备好的文档上对其进行初始化，但您的图像尚未呈现。所以你必须在渲染视图后初始化插件（当图像被添加到 DOM 时）。

【讨论】：

感谢您的回答，我已经更新了插件的路径并尝试在路由器中初始化插件，在 bookListView 的初始化中但没有任何效果。这是更新的小提琴：jsfiddle.net/swayziak/9R9zU/39

【解决方案2】：

您的 Zepto 版本有问题，揭秘使用 zepto 最新版本更新的过滤功能：（来自http://zeptojs.com/#changelog）

新功能

 $.fn.filter(function(index){ ... })

查看使用 http://zeptojs.com/zepto.js 源的更新 jsfiddle (http://jsfiddle.net/9R9zU/41/)。

编辑：

为了使整个示例正常工作，我将揭幕调用移至视图渲染函数 (http://jsfiddle.net/9R9zU/52/)

app.BookView = Backbone.View.extend ({
  tagName: 'div',
  className: 'book',
  template: _.template( $( '#bookTemplate' ).html()),
  render: function() {
    this.$el.html(this.template(this.model.toJSON()));
    this.$el.find("img").unveil();//for every render we run the lazy loader
    return this;
  }
});

【讨论】：

感谢您的回答，我没有注意到 Zepto 版本不是最后一个。但即使插件无法正常工作：当我转到编辑或关于页面并返回书籍列表时，每本书的图像都不会呈现，它只会显示加载图像。
@user2473588 查看编辑和 jsfiddle
嗨，我又试了一次，但我认为女士加载不起作用。当我更新浏览器时，似乎所有视图都已呈现。