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

问题描述

我在这个tumblr上实现了无限滚动以及砌筑:[检查链接的修订版本]

I implemented infinite scroll along with masonry on this tumblr: [check revision for link]

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

The audio player does not appear in posts loaded through infinite scroll, instead it displays the text "[Flash 9 is required to listen to audio.]"

Inspire Well tumblr主题(我无法发布另一个超链接，但您可以轻松地在Google上搜索它)似乎已通过以下代码解决了此问题:

The Inspire Well tumblr theme (I can't post another hyperlink but you can easily google it) seems to have solved this problem through this code:

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(使用占位符文本以查看其是否找到了正确的元素):

I tried to adapt this for my tumblr (with placeholder text to see if it was finding the correct element):

 $(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>");
         }
       });
         }
       });
     }
   );
});

但是没有文字提示.任何帮助将不胜感激.

But there is no sign of the text. Any help would be greatly appreciated.

推荐答案

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

Here is a solution I came up with when I needed to implement the same functionality in the template I was creating.

在HTML中，在注释之间包含AudioPlayer Tumblr标记.这是为了防止调用已加载的脚本.还添加一个未加载"类，以跟踪我们是否已为该帖子加载了音频播放器.

In your HTML, include your AudioPlayer Tumblr tag between comments. This is to prevent loaded scripts from being called. Also add a class "unloaded" to keep track whether or not we've loaded the audio player for this post or not.

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

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

If you look at the commented code after the page is loaded, you will notice an embed tag being passed to one of the Tumblr javascript functions. Since we commented it, it will not execute. Instead we will want to extract this string and replace the div contents with it.

创建一个将执行此操作的javascript函数.可以使用常规的javascript完成此操作，但是为了节省时间，我将使用jQuery来完成此操作，因为这是我为模板执行的操作:

Create a javascript function which will do this. This can be done with regular javascript, but to save time I will do it with jQuery since this is how I did it for my template:

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()，然后在每次无限滚动加载其他帖子时调用.

Call loadAudioPosts() once on page load, then every time your infinite scrolling loads additional posts.

这篇关于Tumblr音频播放器未随无限滚动加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！