jluc2808 peu le savent et vous ? | 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 :
- var jsonUrl = "/yamj3/api/index/video.json?type="+index_type+"&dataitems=status,boxset,rating,videosource&sortby="+sort_type; // construction de la requête json
- .....
- $.ajax({ // appel ajax
- url: jsonUrl,
- async: false,
- dataType: 'jsonp',
- 'success': function(data)
- {
- jsondata = data;
- updateHtml(data); // appliquer les données aux lignes html5
- }
- });
- .....
- function updateHtml(yamjdata)
- {
- $p('div.row').render(yamjdata, LIST_DIR);
- }
- .......
- // le parseur pour traiter les données retour
- var LIST_DIR = {
- "div.block": {
- "result<-results": {
- "span.title": function(arg) {
- if (arg.item.videoType == 'SERIES')
- {
- return arg.item.title + ' (' + arg.item.videoYear + ')' +'<br> '+ window.localStorage.getItem('series_label');
- } else {
- return arg.item.title + ' (' + arg.item.videoYear + ')';
- }
- },
- "img.poster@src": function(arg) {
- // set dummy as default poster
- var output_poster = "pictures/dummy.jpg";
- // Check to see if there are posters
- if (arg.item.artwork.POSTER) {
- var boucle = true;
- var poster = arg.item.artwork.POSTER;
- // Get the first poster available from the list
- for (i = 0; boucle && i < poster.length; i++)
- {
- if (poster[i].generatedId)
- {
- boucle = false; //stop au premier poster trouvé dans la liste
- output_poster = arg.context.baseArtworkUrl + poster[i].filename;
- }
- }
- }
- return output_poster;
- },
- "img.poster@onclick": function(arg) {
- return "setId('" + arg.item.videoType + "', " + arg.item.id + " )";
- },
- "img.playbutton@onclick": function(arg) {
- return "direct_play('" + arg.item.videoType + "', " + arg.item.id + " )";
- },
- }
- }
- };
|
la partie html5
Code :
- <!--Data Items Container-->
- <div id="container" >
- <div id="yRow" class="row">
- <div id="yBlock" class="block" >
- <img class="poster" src="pictures/dummy.png" alt="poster"></img>
- <img class="playbutton" src="pictures/next.png" onmouseout="src='pictures/next.png'" onmouseover="src='pictures/nextSelect.png'" alt="next" title="play"></img>
- <br>
- </div>
- </div>
- </div>
|
|
