Tumblr Audio ne se charge pas avec Infinite Scroll

Question

J'ai mis en défilement infini avec la maçonnerie sur ce tumblr: [révision de contrôle pour le lien]

Le lecteur audio ne figure pas dans les messages chargés par défilement infini, au lieu qu'il affiche le texte « [flash 9 est requis pour écouter audio.] »

Inspire bien le thème de tumblr (je ne peux pas poster un lien hypertexte, mais vous pouvez facilement google) semble avoir résolu ce problème grâce à ce 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>'); 
      } 
     }); 
     } 
    }); 

J'ai essayé d'adapter ce r mon tumblr (avec le texte de l'espace réservé pour voir si elle était de trouver l'élément correct):

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

Mais il n'y a aucun signe du texte. Toute aide serait grandement appréciée.

Answer 1

html

<div class="audio" id="{postID}">{AudioPlayerBlack}</div> 

css

.audio { 
     height:30px; 
     overflow-y: hidden; 
    } 
.audio span { 
     display:none; 
    } 

java

setTimeout(function() { 
         $wall.masonry({ appendedContent: $(newElements) }); 
         /* repair audio players*/ 
         $('.audio').each(function(){ 
          var audioID = $(this).attr("id"); 
          var $audioPost = $(this); 
          $.ajax({ 
           url: 'http://yoolk.tumblr.com/api/read/json?id=' + audioID, 
           dataType: 'jsonp', 
           timeout: 50000, 
           success: function(data){ 
            $audioPost.append('\x3cdiv style=\x22background-color:white;height:30px\x22 class=\x22audio_player\x22\x3e' + data.posts[0]['audio-player'] +'\x3c/div\x3e'); 
           } 
          }); 
         }); 


        }, 2000); 

Answer 2

Voici une solution que je suis venu avec quand je avais besoin pour mettre en œuvre les mêmes fonctionnalités dans le modèle que je créais .

Dans votre code HTML, incluez votre tag Tumblr AudioPlayer entre les commentaires. Cela permet d'empêcher l'appel des scripts chargés. Ajoutez également une classe "déchargée" pour garder une trace si nous avons ou non chargé le lecteur audio pour ce post ou non.

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

Si vous regardez le code commenté après la page est chargée, vous remarquerez une balise embed étant passé à l'une des fonctions javascript Tumblr. Puisque nous l'avons commenté, il ne s'exécutera pas. Au lieu de cela, nous allons vouloir extraire cette chaîne et remplacer le contenu div avec elle.

Créez une fonction javascript qui va le faire. Cela peut être fait avec javascript régulier, mais pour gagner du temps, je vais le faire avec jQuery car voici comment je l'ai fait pour mon modèle:

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

Appel loadAudioPosts() une fois la charge de page, puis chaque fois que vos charges de défilement infini messages supplémentaires.