gpt4 book ai didi

Tumblr 音频播放器未加载无限滚动

转载 作者:行者123 更新时间:2023-12-04 06:41:08 24 4
gpt4 key购买 nike

我在这个 tumblr 上实现了无限滚动和砖石:[检查链接的修订]

音频播放器不会出现在通过无限滚动加载的帖子中,而是显示文本“[需要 Flash 9 才能收听音频。]”

Inspire Well tumblr 主题(我无法发布另一个超链接,但您可以轻松地用谷歌搜索它)似乎通过以下代码解决了这个问题:

if(InspireWell.infiniteScrolling && InspireWell.indexPage){
$masonedColumn.infinitescroll({
navSelector : 'ul.page_nav', // selector for the paged navigation
nextSelector : 'ul.page_nav li.page_next a', // selector for the NEXT link (to page 2)
itemSelector : '.post', // selector for all items you'll retrieve
loadingImg : '',
donetext : 'No more pages to load.',
errorCallback: function() {
// fade out the error message after 2 seconds
//$('#infscr-loading').animate({opacity: .8},2000).fadeOut('normal');
}
},
// call masonry as a callback
function( newElements ) {

$(newElements).css({ visibility: 'hidden' });

$(newElements).each(function() {
if($(this).hasClass("audio")){
var audioID = $(this).attr("id");
var $audioPost = $(this);
$audioPost.find(".player span").css({ visibility: 'hidden' });

var script=document.createElement('script');
script.type='text/javascript';
script.src="http://assets.tumblr.com/javascript/tumblelog.js?16";

$("body").append(script);

$.ajax({
url: "http://thetestinggrounds.tumblr.com/api/read/json?id=" + audioID,
dataType: "jsonp",
timeout: 5000,
success: function(data){
$audioPost.find(".player span").css({ visibility: 'visible' });
$audioPost.find("span:first").append('<script type="text/javascript">replaceIfFlash(9,"audio_player_' + audioID + '",\'\x3cdiv class=\x22audio_player\x22\x3e' + data.posts[0]['audio-player'] +'\x3c/div\x3e\')</script>');
}
});
}
});

我试图为我的 tumblr 调整它(使用占位符文本来查看它是否找到了正确的元素):
 $(window).load(function(){
$('#allposts').masonry({
singleMode: true,
itemSelector: '.box'
});
$('#allposts').infinitescroll({
navSelector : "div.navigation",
nextSelector : "div.navigation a:first",
itemSelector : ".box",
debug : true
},
function( newElements ) {
$(this).masonry({ appendedContent: $( newElements ) });
$(newElements).each(function(){
if($(this).hasClass("audio")){
var audioID = $(this).attr("id");
var $audioPost = $(this);
$audioPost.find(".audio span");
var script=document.createElement('script');
script.type='text/javascript';
script.src="http://assets.tumblr.com/javascript/tumblelog.js?16";
$("body").append(script);
$.ajax({
url: "http://fuckyeahempathy.tumblr.com/api/read/json?id=" + audioID,
dataType: "jsonp",
timeout: 5000,
success: function(data){
$audioPost.find(".audio span");
$audioPost.find("span:first").append("<p>audio player not working</p>");
}
});
}
});
}
);
});

但是没有文字的迹象。任何帮助将不胜感激。

最佳答案

当我需要在我创建的模板中实现相同的功能时,这是我想出的一个解决方案。

在您的 HTML 中,在评论之间包含您的 AudioPlayer Tumblr 标签。这是为了防止调用加载的脚本。还添加一个“unloaded”类来跟踪我们是否为这篇文章加载了音频播放器。

...
{block:AudioPlayer}
<div class="audio-player unloaded">
<!--{AudioPlayerBlack}-->
</div>
{/block:AudioPlayer}
...

如果您在页面加载后查看注释代码,您会注意到一个 embed 标记被传递给 Tumblr javascript 函数之一。既然我们评论了它,它就不会执行。相反,我们将要提取此字符串并用它替换 div 内容。

创建一个 javascript 函数来执行此操作。这可以使用常规 javascript 来完成,但为了节省时间,我将使用 jQuery 来完成,因为这是我为我的模板所做的:
function loadAudioPosts() {
// For each div with classes "audio-player" and "unloaded"
$(".audio-player.unloaded").each(function() {

// Extract the <embed> element from the commented {AudioPlayer...} tag.
var new_html = $(this).html().substring(
$(this).html().indexOf("<e"), // Start at "<e", for "<embed ..."
$(this).html().indexOf("d>")+2 // End at "d>", for "...</embed>"
);

// Replace the commented HTML with our new HTML
$(this).html(new_html);

// Remove the "unloaded" class, to avoid reprocessing
$(this).removeClass("unloaded");
});
}

调用 loadAudioPosts()一旦页面加载,然后每次无限滚动加载额外的帖子。

关于Tumblr 音频播放器未加载无限滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4218377/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com