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

Question

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

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

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

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

<iframe class="lazyload playList" data-src="" width="300" height="80" 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 当然是不同的

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

Answer 1

这就是我会做的：

http://jsfiddle.net/vjw7o9ha/

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

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

Answer 2

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

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

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

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

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