BackboneJS如何在悬停时加载Spotify播放列表

Posted 2023-04-15

【中文标题】BackboneJS如何在悬停时加载Spotify播放列表

【英文标题】：BackboneJS How to load spotify playlists on hover

【发布时间】：2015-04-29 23:58:28

【问题描述】：

有没有办法只在悬停时加载嵌入式 Spotify iframe？

我有这个 Backbone 应用程序，其中我在 iframe 中嵌入了一堆播放列表，但页面非常缓慢和沉重，因为它一次加载所有播放列表。

我尝试添加lazysizes-plugin，但它似乎不起作用/帮助（速度保持不变）

所以，我的 html 看起来很简单：

<iframe class="lazyload playList" data-src=""   frameborder="0" allowtransparency="true"></iframe>

编辑

这是我的脚本

this.collection.each(function(spotify, index) 
    var service = spotify.get('services').spotify,
        s=service.match(/[^\/:]*$/);
        $('iframe.playList').eq(index+3).attr('data-src', 'https://embed.spotify.com/?uri=spotify:user:digster.dk:playlist:'+s);    
);

我在一个页面上一次最多有 16 个播放列表，所以 data-src 对于每个 iframe 当然是不同的

有人有什么想法或建议吗？

【问题讨论】：

你能给我举一个你尝试lazySizes的例子吗？ （我是它的作者）。看看我能做什么是我的责任！ （您是否也尝试过将lazySizes 扩展选项降低到10 之类的值？）

好吧，基本上我只是将 lazysizes-plugin 添加到 eh 页面（通过使用 RequireJS），然后将“lazyload”类添加到我的 iframe 中......但我几乎认为我没有t 与它有关，它更多的是 spotify API，例如spotilocal 导致页面变慢的问题...

【参考方案1】：

这就是我会做的：

http://jsfiddle.net/vjw7o9ha/

基本上，您创建所有不带src 的 iframe，然后在悬停时使用 jquery 设置源。

这只是一个示例，您可以从这里开始创建更好的代码。

【参考方案2】：

直接在 iframe 上使用鼠标悬停可能会有问题，因为 iframe 是不同的文档。

如果你使用了lazySizes（我希望你没有添加类，但也将src更改为data-src）你可以尝试这样的事情：

使用 data-src 添加 iframe，但没有 class="lazyload"

在 domready 或更高版本的 window.onload 上添加类lazyload

$(window).on('load', function() $('iframe[data-src]').addClass('lazyload'); );

【讨论】：

嗯有趣的方法，但它没有解决它...我会责怪 Spotify API :-)