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

BackboneJS How to load spotify playlists on hover

本文关键字：加载 spotify 播放列表 悬停 BackboneJS      更新时间：2024-06-11

有没有一种方法可以在悬停时只加载嵌入的Spotify Iframes？

我有一个Backbone应用程序，我在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当然是不同的

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

这就是我要做的：

http://jsfiddle.net/vjw7o9ha/

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

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

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

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

  1. 添加带有数据src的iframe，但不包含class="lazylod"

  2. 在domready或稍后的window.onload上添加类lazylod

    <iframe-data src="spotify.html">/irame>

    $（window）.on（'load'，function（）{$（'iframe[data src]'）.addClass（'lazyload'）；})；

相关文章：