0

我有一个带有 require.js、underscore.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>

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

知道是什么原因造成的。

4

2 回答 2

0

我强烈建议不要使用 jQuery 延迟加载和类似的插件来一般使用，特别是在高度动态的网页上使用。jQuery 延迟加载通常很慢，但每次运行$("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");

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

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

我很确定你会喜欢的。

于 2015-03-27T10:12:40.627 回答
0

看起来您对 .bind() 的调用有点不对劲。也许尝试下划线 _bindAll() 在回调中获取 this 的上下文：

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 来调用它们。方法名是必需的。

这有帮助吗？

于 2015-03-27T08:26:29.330 回答