IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Chargement d'éléments empêche action immédiate par l'utilisateur


Sujet :

JavaScript

  1. #1
    Membre régulier
    Profil pro
    Inscrit en
    Mars 2003
    Messages
    453
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mars 2003
    Messages : 453
    Points : 74
    Points
    74
    Par défaut Chargement d'éléments empêche action immédiate par l'utilisateur
    Bonjour,

    Sur une de mes pages, je charge 4 images et au fur et à mesure je charge 4 autres images (à partir d'une autre page qui aura un pagenumber en paramètre) et ainsi de suite.
    Mais du coup quand je clique sur une tuile pour ouvrir son contenu, la page va attendre que toutes les images (toutes les pages) soient ajoutées avant de faire mon action d'ouvrir le contenu..

    Comment puis-je éviter ça?

    Merci.

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
     
     
     
     
    function addPages(page) {
    	$("<div>").load(urlStr + " .list-content", function() {
    		if(page == nbPages) {
    			console.log('last page');
    			$('.loading').css('display','none');
    		}
    		console.log(page);
    		$(".articleList").append("<div class='list-content'>" + $(this).find(".list-content").html() + "</div>");
     
              $('.content-img').mouseover(function(){
      $(this).parent().find('.content-description').css('width','600px');
      $(this).parent().find('.content-button-tile').css('display','block');
    });
     
    $('.content-description').mouseover(function(){
      $(this).css('width','600px');
      $(this).find('.content-button-tile').css('display','block');
    });
     
    $('.content-img').mouseout(function(){
    $(this).parent().find('.content-description').css('width','200px');
    	$(this).parent().find('.content-button-tile').css('display','none');
    });
     
    $('.content-description').mouseout(function(){
    $(this).css('width','200px');
    	$(this).find('.content-button-tile').css('display','none');
    });
     
    		page++;
    		if(page <= nbPages) {
    			urlStr = myURL + "?pagenumber=" + page + "&category=" + categ + "&year=" + yr;
    			console.log(urlStr);
     
         addPages(page);
     
     
    		}		
    	});
     
     
     
    }
     
    // 1ère page loadée a: les 4 premiers articles 
    var nbArticles = parseInt($('.list-paging-left').text().split('p')[0]);
    var nbPages = Math.ceil(nbArticles / 4);
    var myURL = "url de ma page";
     
    // Si + de 4 articles, charger les autres pages
    if(nbPages <=1) {
     $('.loading').css('display','none');
    }
    else {
     
     
        // En fonction de la categorie et année demandée (dans l'url)
        var categ = window.location.href.split("category=")[1];
        var yr = window.location.href.split("year=")[1];
     
    	if (categ == null) {
    		categ = "all";
    	}
     
    	if (yr == null) {
    		yr = "all";
    	}   
     
    	var page = 2;	
    	var urlStr = myURL + "?pagenumber=" + page + "&category=" + categ + "&year=" + yr;
    	console.log(urlStr);
    	console.log(nbPages + "pages");
    	var lastScrollTop = 0;
     
     
         addPages(page);
     
     
     
     
    }

  2. #2
    Expert confirmé Avatar de psychadelic
    Profil pro
    Inscrit en
    Mai 2010
    Messages
    2 529
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2010
    Messages : 2 529
    Points : 4 740
    Points
    4 740
    Par défaut
    Charger les contenus par ajax...
    «La pluralité des voix n'est pas une preuve, pour les vérités malaisées à découvrir, tant il est bien plus vraisemblable qu'un homme seul les ait rencontrées que tout un peuple.» [ René Descartes ] - Discours de la méthode

Discussions similaires

  1. Réponses: 1
    Dernier message: 16/04/2013, 11h28
  2. Réponses: 1
    Dernier message: 25/10/2006, 11h13
  3. Réponses: 5
    Dernier message: 30/08/2006, 12h04
  4. [formulaire] Modifier l'action engendrée par la touche [Entrée]
    Par FrankOVD dans le forum Balisage (X)HTML et validation W3C
    Réponses: 3
    Dernier message: 12/05/2006, 16h58
  5. chargement de photos sur action d'un <select>
    Par bibile dans le forum Général JavaScript
    Réponses: 15
    Dernier message: 20/12/2005, 19h04

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo