Question

有没有办法只在悬停时加载嵌入的Spotify Iframe？

我有这个Backbone App，我在iframe中嵌入了大量播放列表，但页面非常缓慢而且很重，因为它会立即加载所有播放列表。

我尝试添加lazysizes - 插件，但它似乎没有工作/帮助（速度保持不变）

所以，我的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个播放列表，因此当然每个iframe的data-src都不同

任何人都有想法或建议吗？

Answer 1

这就是我要做的事情：

http://jsfiddle.net/vjw7o9ha/

基本上，您创建的所有iframe都没有src，而在悬停时，您使用jquery来设置源。

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

Answer 2

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

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

使用data-src添加iframe，但没有class =＆＃34; lazyload＆＃34;
在domready或更高版本的window.onload上添加类lazyload

＆lt; iframe data-src =＆＃34; spotify.html＆＃34;＆gt; / iframe＆gt;

$（window）.on（＆＃39; load＆＃39;，function（）{ $（＆＃39; iframe的[数据-SRC]＆＃39）。addClass（＆＃39; lazyload＆＃39）; }）;

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

2 个答案: