Question

我有一个带有require.js，underscore.js的Backbone.js应用程序。现在我想将jquery lazy loading plugin与Eislider banner一起使用。

在应用延迟加载脚本之前，横幅效果很好。

这就是我在骨干视图中的表现：

 render: function(options){
        var _banner = _.template(BaTem);
        var homebanner = new ProWeb();
        homebanner.getPrCallBack(this.options.type, function(result) {
            $(this.el).html(_banner({type : this.options.type,result:result}));
            $("img.lazy").lazyload({
                 event : "click"
            });
        }.bind(this));
        return this;
}

这是html文件中的模板，使用text.js

<ul class="ei-slider-large">
 <li>
    <img class="lazy" data-original=images/05056ba1e25.png" alt="slide show" width="640" height="480"/>
 <a href="#itemDet">
    <img class="lazy" data-original=images/05056ba1e25.png" alt="slide show" width="640" height="480"/>
 </a>
 <a href="#item">
    <img class="lazy" data-original=images/05056ba1e25.png" alt="slide show" width="640" height="480"/>
 </a>
 </li>
</ul>

应用延迟加载脚本后，图像将停止显示。

知道可能导致这种情况的原因。

Answer 1

看起来你对.bind（）的调用有点偏。也许尝试使用Underscore _bindAll（）来获取回调中的内容：

render: function(options) {
    var _banner = _.template(BaTem);
    var homebanner = new ProWeb();

    _.bindAll(homebanner, 'getPrCallBack');

    homebanner.getPrCallBack(this.options.type, function(result) {
        $(this.el).html(_banner({type : this.options.type,result:result}));
        $("img.lazy").lazyload({
             event : "click"
        });
    });

    return this;
}

http://underscorejs.org/#bindAll

将methodNames指定的对象上的多个方法绑定到无论何时调用它们，都要在该对象的上下文中运行。非常方便用于将用作事件的绑定函数处理程序，否则将被调用相当无用的。 methodNames是必需的。

这有帮助吗？

Answer 2

我强烈反对使用jQuery lazyload和类似的插件来使用，特别是在高度动态的网页上。 jQuery lazyload通常很慢，但是每次运行$("img.lazy").lazyload();时，都会创建一个新的Observer / Lazyload实例，其中包含对你放在那里的所有图像的强引用。

虽然你可以通过提供更具体的上下文来改善这一点：$("img.lazy", this.el).lazyload();它仍然效率很低。

一般情况下，我认为你需要触发合成滚动事件：

$(this.el).html(_banner({type : this.options.type,result:result}));
$("img.lazy", this.el).lazyload({event : "click"});
$(window).trigger("scroll");

但我没有这样做，而是使用jQuery lazyload，我建议您尝试使用lazySizes。我开发时考虑了动态页面和SPA。您不需要在渲染函数中调用特殊函数或触发事件（=您可以简单地删除对$ .lazyload的调用）（这有助于分离关注点）。

您只需添加script to your page并使用data-src代替data-original而使用lazyload类而不是lazy（当然您也可以配置选项，以便您甚至不需要更改标记。）

<ul class="ei-slider-large">
 <li>
    <img class="lazyload" data-src=images/05056ba1e25.png" alt="slide show" width="640" height="480"/>
 <a href="#itemDet">
    <img class="lazyload" data-src=images/05056ba1e25.png" alt="slide show" width="640" height="480"/>
 </a>
 <a href="#item">
    <img class="lazyload" data-src=images/05056ba1e25.png" alt="slide show" width="640" height="480"/>
 </a>
 </li>
</ul>

此外：Eislider横幅似乎需要您的图像大小才能正常工作。这意味着您需要在通过CSS加载之前定义宽度和高度。如果这些图像是静态的（即：640x480），您将不需要更改任何内容。如果您具有响应式图像的响应式布局，则需要使用CSS内在模式来解决此问题。

这看起来像这样：

.ei-slider-large li {
    position: relative;
    height: 0;
    padding-bottom: 75%;
    width: 100%;
}
.ei-slider-large img {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

我很确定你会喜欢它。

Backbone.js与jQuery的Lazy Load Plugin

2 个答案: