2
votes

La fonction Jquery se charge uniquement après l'actualisation de la page

J'ai environ 50 miniatures vidéo sur une page définie.

Je voudrais les redimensionner en fonction de la résolution.

Ce que j'ai essayé était d'utiliser @media code > requête en css qui n'a pas fonctionné comme prévu, alors je suis passé à ceci.

$(document).ready(function(event) {
  var width = $(window).width();
  // Change thumbnail size if browser width changes (should be in real-time)   
  if (width <= 1300) {
    console.log(width);
    $('.mdl-cell').removeClass('mdl-cell--3-col').addClass('mdl-cell--4-col');
  } else {
    $('.mdl-cell').removeClass('mdl-cell--4-col').addClass('mdl-cell--3-col');
  }
});

Après avoir inséré ce script, la taille de la miniature de la vidéo change, mais comme J'ajuste le navigateur que jQuery ne charge pas et redimensionne la vignette à moins que la page ne soit actualisée?

Je ne sais pas pourquoi jQuery ne charge pas le script en temps réel lorsque la taille (navigateur) change.

Langues que j'utilise dans ce projet: PHP, jQuery

javascript jquery

2 commentaires

api.jquery.com/resize essayez ceci. Vous devez utiliser l'événement resize pour détecter le redimensionnement réel de la fenêtre

Vous n'y pensez pas correctement - jQuery ne se charge qu'une seule fois en utilisant $ (document) .ready () vous devez utiliser .resize () api.jquery.com/resize

3 Réponses :

5
votes

vous devez attraper l'événement de redimensionnement de la fenêtre avec jQuery et y écrire votre code.

$(window).resize(function() {
    var width = $(window).width();
    // Change thumbnail size if browser width changes (should be in real-time)   
    if (width <= 1300) {
        console.log(width);
        $('.mdl-cell').removeClass('mdl-cell--3-col').addClass('mdl-cell--4-col');
    } else {
        $('.mdl-cell').removeClass('mdl-cell--4-col').addClass('mdl-cell--3-col');
    }
});

Pour réduire la répétition du code, vous pouvez créer une fonction et l'appeler à la fois dans $ (window ) .resize () et $(document).ready()

0 commentaires

0
votes

function onResize() {
    var width = $(window).width();
    if (width <= 1300) {
        $('.mdl-cell').removeClass('mdl-cell--3-col').addClass('mdl-cell--4-col');
    } else {
        $('.mdl-cell').removeClass('mdl-cell--4-col').addClass('mdl-cell--3-col');
    }
}

$(document).ready(onResize);

$(window).resize(onResize);
This should work, but it would be much better if it were done with css. Would love you help you with that if you want to post what you tried. If you do it with css, you will not have the jumping on the page that'll occur when the js loads and changes those classes in and out.

3 commentaires

Correct. Utiliser CSS devrait être la voie à suivre ici.

Pas besoin de css, car je ferai plus en utilisant jQuery. Ainsi j'ai posté les données jQuery au lieu du CSS, quant au saut. Cela ne saute pas car j'ai un css pour lisser ces changements avec une animation. Je voudrais vous montrer bien que ce soit du contenu pour adultes. Donc, ce n'est pas possible.

Bien sûr, en supposant qu'il s'agisse des classes de conception de matériaux que vous utilisez, vous pourrez également lui attribuer plusieurs classes en fonction des points d'arrêt pour lesquels vous souhaitez réduire. Comme dans, donner simplement aux vignettes quelque chose comme mdl-cell mdl-cell - 4-col mdl-cell - 3-col-phone le ferait. getmdl.io/components/index.html#layout-section/grid

0
votes

Vous pouvez faire quelques choses comme ceci.

Remarque: il s'agit d'un code non testé

function updateSizes(){
    var width = $(window).width();
    if (width <= 1300) {
        $('.mdl-cell').removeClass('mdl-cell--3-col').addClass('mdl-cell--4-col');
    } else {
        $('.mdl-cell').removeClass('mdl-cell--4-col').addClass('mdl-cell--3-col');
    }
}

$(document).ready(function(event) {
    updateSizes();
    // do other stuff here
});

$( window ).resize(function() {
    updateSizes();
    // do other stuff here
});

5 commentaires

Je suppose que cela devrait fonctionner, bien que votre premier commentaire soit correct, un simple changement de .resize fonctionne à merveille. Vérifiez la réponse @IftifarTaz.

mais alors cela ne fonctionnerait pas au chargement initial de la page :) Donc, vous avez certainement besoin à la fois de doc prêt et de redimensionner les événements liés

Ouais, j'ai le redimensionnement dans le $. (Document) .ready (); c'est comme ça qu'il change activement. Je l'ai essayé sans et il ne se charge tout simplement pas.

Regardez la réponse acceptée ici. Il existe d'autres moyens de le faire stackoverflow.com/a/7404981/3741900

De plus, pour le rendre encore plus fluide (sans appeler la fonction trop de fois), vous pouvez avoir un setTimeout () et ne faire le redimensionnement qu'à la fin du redimensionnement