afficher des images au fur et à mesure d'un appel ajax

afficher des images au fur et à mesure d'un appel ajax - HTML/CSS - Programmation

Marsh Posté le 01-07-2016 à 20:02:25    

bonjour ,  
 
dans une page html5 je  souhaiterais pouvoir afficher au fur et à mesure les images qui sont retournées via une query ajax  
actuellement l'appel ajax se déroule ramène une serie de données dont les images et l'affichage se fait en bloc après le déroulé du javascript , comme il peut y avoir plusieurs milliers d'image , l'attente de l'affichage de la 1ère est longue.  
 
voici les bouts de codes qui sont utilisés :  
les appels ajax et le parseur sont en javascript :  

Code :
  1. var jsonUrl = "/yamj3/api/index/video.json?type="+index_type+"&dataitems=status,boxset,rating,videosource&sortby="+sort_type;   // construction de la requête json
  2. .....
  3. $.ajax({       // appel ajax  
  4.                 url: jsonUrl,
  5.                 async: false,
  6.                 dataType: 'jsonp',
  7.                 'success': function(data)
  8.                 {
  9.                     jsondata = data;
  10.      updateHtml(data);    //  appliquer les données aux lignes html5
  11.                 }
  12.             });
  13. .....
  14. function updateHtml(yamjdata)
  15.         {
  16.             $p('div.row').render(yamjdata, LIST_DIR);
  17.         }
  18. .......
  19. // le parseur pour traiter les données retour  
  20. var LIST_DIR = {
  21.   "div.block": {
  22.                 "result<-results": {
  23.                      "span.title": function(arg) {
  25.     if (arg.item.videoType == 'SERIES')
  26.         {
  27.          return arg.item.title + ' (' + arg.item.videoYear + ')' +'<br> '+ window.localStorage.getItem('series_label');
  29.        } else {
  30.         return arg.item.title + ' (' + arg.item.videoYear + ')';
  31.        }
  32.     },
  34.                     "img.poster@src": function(arg) {
  35.   // set dummy as default poster
  36.                        var output_poster = "pictures/dummy.jpg";
  37.                         // Check to see if there are posters
  38.                         if (arg.item.artwork.POSTER) {
  39.       var boucle = true;
  40.       var poster = arg.item.artwork.POSTER;
  41.       // Get the first poster available from the list
  42.       for (i = 0; boucle && i < poster.length; i++)
  43.        {
  44.         if (poster[i].generatedId)
  45.        {
  46.         boucle = false;  //stop au premier poster trouvé dans la liste
  47.         output_poster = arg.context.baseArtworkUrl + poster[i].filename;
  48.         }
  49.        }
  50.       }
  51.       return output_poster;
  52.                     },
  54.                     "img.poster@onclick": function(arg) {
  55.                         return "setId('" + arg.item.videoType + "', " + arg.item.id + " )";
  56.                     },
  59.          "img.playbutton@onclick": function(arg) {
  60.                         return "direct_play('" + arg.item.videoType + "', " + arg.item.id + " )";
  61.                     },
  63.                 }
  64.             }
  65.         };


 
la partie html5

Code :
  1. <!--Data Items Container-->
  2.         <div id="container" >
  3.             <div id="yRow" class="row">
  5.                 <div id="yBlock" class="block" >
  6.   <img class="poster" src="pictures/dummy.png" alt="poster"></img>
  7.                         <img class="playbutton" src="pictures/next.png" onmouseout="src='pictures/next.png'" onmouseover="src='pictures/nextSelect.png'" alt="next" title="play"></img> 
  8.         <br>
  9.                 </div>
  10.           </div>
  11.       </div>

Reply

Marsh Posté le 01-07-2016 à 20:02:25   

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed