jQuery Girl
  1. jQuery Girl
  3. jQuery LazyLoad ne charge pas les images avant le défilement
Intereting Posts
jqGrid Effacer les critères de recherche jquery slider avec AmChart mélanger plus de 2 couleurs avec javascript Jquery glisser-déposer avec les cellules de tableau et obtenir leur position pour enregistrer Comment utiliser JSLint pour un segment de code dépendant de JQuery? Boîte de dialog de confirmation de l’interface utilisateur jQuery et postback asp.net Comment obtenir un espace de noms sur javascript sur asp.net web? Impossible d’accéder à l’ID de contrôle asp.net dans jQuery L’événement de clic Safari et l’état actif ne peuvent pas coexister changement d’atsortingbut dans jQuery Galerie d’images – Pinterest comme mise en page avec CSS? Initialiser le plugin jQuery après le chargement du contenu AJAX Créer une table de colonnes verticales basée sur un tableau d’objects Comment garder la boîte de dialog de l’interface utilisateur de jQuery ouverte lors de la fermeture de fancybox à l’aide de la touche “escape” Comment convertir une promesse angular en object différé jQuery

jQuery LazyLoad ne charge pas les images avant le défilement

jQuery LazyLoad ne charge pas les images dans la partie visible de la page ouverte jusqu’à ce que je fasse défiler la page même sur 1px

Quand je fais défiler la page tout fonctionne correctement

Mettre à jour:

CoffeScript 

jQuery -> $("img.lazy").show().lazyload() $(window).resize()

Mais $(window).resize() n’est utile que si je l’entre depuis la console du navigateur une fois la page chargée.

Vos images doivent avoir la largeur et la hauteur définies. 

 $("img.lazy").lazyload({ threshold : 50 });

Et ajoutez ceci: 

 $(window).load(function(){ $("html,body").sortinggger("scroll"); });

Essaye ça…. 

 $(function() { $("img.lazy").show().lazyload() window.onload = function() { $(window).resize() }; });

La version actuelle de Lazyload déclenche la mise à jour initiale lors du chargement de la fenêtre. Donc, si vous chargez des images dynamicment plus tard, vous avez besoin d’un événement supplémentaire tel qu’un défilement pour déclencher un cycle de mise à jour. Ce fut mon problème avec des images montrant seulement après le défilement.

Je suis trop en retard, mais si vous rencontrez toujours ce problème, utilisez les combinaisons pures javascript setTimeout () et window.scrollBy () pour votre événement requirejs. Je l’ai résolu onClick car je devais afficher les images sous des volets à tabs où seul le premier onglet chargé montrait des images lorsque la page était chargée, mais le rest des tabs ne s’affichait pas lorsque l’utilisateur cliquait jusqu’à ce que l’utilisateur fasse défiler légèrement. mon code est ci-dessous: 

 function myFunction() { setTimeout(function() { window.scrollBy(0, 100) }, 1000);; } 
  Click me to scroll after 1000 milliseconds

C’est ce qui a résolu ce problème pour moi: 

 $("html,body").on('scroll', function(){ $(window).resize() });

C’est très simple, cela crée simplement un window.resize sur l’événement de défilement à partir des balises body et html. bam.

Je reçois mes images par le biais d’une requête $.post() chaque fois que je filtre par certaines choses. J’ai donc besoin que tout soit exécuté à chaque rechargement. 

 $.post( "queries.php", { var1:var1, var2:var2, .. }, function(response){ for( var i=0; i

Lorsque vous initialisez lazyload, vous pouvez lui indiquer le ou les événements à déclencher (par défaut, il est défini sur ‘scroll’). Je suggère d’append un événement personnalisé à cette liste et de le déclencher chaque fois que cela vous semble judicieux: 

 $('.lazy').lazyload({ event: 'scroll whenever-i-want' }); // whenever you want to sortinggger your event (after ajax load, on dom ready, etc...) $(document).sortinggger('whenever-i-want');

Cela laisse la fonctionnalité de défilement par défaut, mais vous permet également de déclencher le chargement paresseux à la demande.

Comme indiqué dans cette question SO , la définition de skip_invisible sur false a résolu le problème pour moi. 

 $(document).ready(function () { $("img.lazy").lazyload({ 
placeholder: rooturl + "Themes/images/imgloading.gif",
 effect: "fadeIn",
 skip_invisible: false
 });
 });
 $(document).ready(function() {
 $(window).load(function() {
 update();
 }); 
 });

Utilisez ce script de chargement paresseux https://github.com/tuupola/jquery_lazyload/blob/master/jquery.lazyload.js#L130

Pour les curseurs ayant plusieurs images commandées par z-index, l’option failure_limit sera utile.

Plus de détails sur cette option sont ici