Backbone.js与jQuery的Lazy加载插件

Backbone.js with Lazy Load Plugin for jQuery

本文关键字：Lazy 加载 插件 jQuery js Backbone      更新时间：2023-09-26

我有一个包含require.js和undercore.js的Backbone.js应用程序。现在我想使用带有Eislider横幅的jquery懒惰加载插件。

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

这就是我在主干视图中所做的：

 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;
}

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

<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>

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

知道是什么原因造成的吗。

您对.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指定的多个方法绑定到无论何时调用它们，都将在该对象的上下文中运行。非常方便绑定将用作事件的函数处理程序，否则会用一个相当无用的this调用这些处理程序。methodNames是必需的。

这有帮助吗？

我强烈建议不要使用jQuery lazyload和类似的插件，尤其是在高度动态的网页上。jQuery lazyload通常速度较慢，但每次运行$("img.lazy").lazyload();时，都会创建一个新的Observer/Lazylod实例，其中强烈引用了您放入的所有图像。

虽然您可以稍微改进一下，但通过提供更具体的上下文：$("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");

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

您只需要将脚本添加到页面中，并使用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;
}

我相信你会喜欢的。

相关文章：