Combinant jQuery Isotope et le Lazy Load

Ont commencé un projet à l'aide de jQuery Isotope. Initialement intégré avec l'Infini défilement, mais que c'était un peu maladroit.

Était l'espoir de remplacer Infini Défilement avec Lazy Load, et je me demandais si quelqu'un a eu de la chance de combiner les deux. Des conseils pour les faire jouer nice, serait grande.

Merci d'une usine de

Actuellement les images il suffit de charger comme d'habitude (comme si le Lazy Load n'existait même pas)

OriginalL'auteur Nelga | 2012-07-05

  1. 24

    Si vous souhaitez utiliser des isotopes du tri/fonctions de filtrage, vous devez définir le failure_limit de lazyload et de déclencher l'événement avec des isotopes du onLayout de rappel.

    jQuery(document).ready(function($) {
var $win = $(window),
    $con = $('#container'),
    $imgs = $("img.lazy");

$con.isotope({
    onLayout: function() {
        $win.trigger("scroll");
    }
});

$imgs.lazyload({
    failure_limit: Math.max($imgs.length - 1, 0)
});

    Explication

    Selon les docs ( http://www.appelsiini.net/projects/lazyload )

    Après le défilement de la page de Chargement différé des boucles bien déchargé des images. Dans la boucle, il vérifie si l'image est devenue visible. Par défaut, la boucle est arrêté lors de la première image ci-dessous le pli (non visible) est trouvé. Ceci est basé sur l'hypothèse suivante. L'ordre des images sur la page est le même que l'ordre des images dans le code HTML. Avec certaines dispositions de cette hypothèse peut être faux.

    Avec un isotope trier/liste filtrée, l'ordre des pages est certainement différente de l'HTML, donc nous devons ajuster notre failure_limit.

    Comme vous pouvez le voir, nous stockons l'objet jQuery, de sorte que nous pouvons utiliser sa longueur-1 en tant que notre failure_limit. Si vous êtes curieux de savoir pourquoi il est de longueur 1, c'est à cause de la case dans lazyload de la méthode de mise à jour.

    if (++counter > settings.failure_limit) {
    return false;
}

    Lazy load sur d'autres événements

    Si vous n'êtes pas le déclenchement de votre lazyloads sur de défilement, vous devez remplacer le "scroll" déclencheur pour n'importe quel événement que vous utilisez.

    Démo

    http://jsfiddle.net/arthurc/ZnEhn/

    Cela a aidé, mais n'a pas obtenir de moi à 100% de la façon dont il. Ce qui finalement cloué pour moi avec mon isotopes de tri et de filtrage question a été l'édition du lazy load script lui-même comme l'a recommandé ici: github.com/desandro/isotope/issues/244#issuecomment-11635862
    Cela a fonctionné génial! ;D
    Ressemble à la jsfiddle est maintenant brisé comme un résultat de la première github le code des liens à l'extérieur de la JS bibliothèques. Voici une version mise à jour du violon qui fonctionne comme prévu à l'aide cdnjs à la place: jsfiddle.net/Hendeca/hW6Dz/1
    Le violon est maintenant réparé et fonctionne avec courant des isotopes de l'API jsfiddle.net/arthurc/ZnEhn

    OriginalL'auteur acarabott

  2. 2

    Je pense que vous pourriez avoir de la chance en utilisant ceci à la place : https://github.com/fasterize/lazyload

    C'est la bibliothèque autonome afin de ne pas casser.

    Merci pour la réponse, mais le problème semble plutôt être liée à des isotopes capacité à rendre les favoris des éléments dont il a besoin pour travailler. Ainsi, alors que vous attendez le lazy load pour être fine pour les isotopes (parce qu'il rend tous les éléments, ne pas remplir), il semble toujours à l'échec.
    Avez-vous essayé d'utiliser ce plugin et isotopique avec une petite liste d'éléments, et l'observation de la chronologie dans les outils de dev (chrome ou firebug, peu importe)? Ce qui doit arriver à la matière ce que c'est que les images sont chargées après tout, et peu à peu. Je suis curieux de savoir si sur la façon dont vous pouvez évaluer l'échec de lazyload?
    La mise à jour du violon fonctionne avec lazy load et isotopique correctement jsfiddle.net/arthurc/ZnEhn

    OriginalL'auteur Krimo

  3. 2

    Ici du code de travail en utilisant à la fois jquery isotope et lazyload ensemble avec succès (testé dans Chrome)

    http://jsfiddle.net/wN6tC/62/

    Dans le navigateur de la console, vous obtiendrez de la console.log ("chargement de l'image') de confirmation lorsque l'image est chargée, comme vous le faites défiler vers le bas. Faites glisser le jsfiddle html case pour modifier la largeur et la vous verrez la disposition de changer dynamiquement.

    J'ai ajouté un fond rouge de la classe de sorte que vous pouvez voir comment les isotopes modifie le dom après qu'il se charge. La plupart des problèmes en essayant de mettre en place cela viennent, à mon humble avis, isotope de manipulation du dom.

    J'espère que c'est assez pour vous obtenir a commencé. Avoir du plaisir.

    Mise à jour:
    Je n'ai jamais testé exemple dans d'autres navigateurs, et apparemment IE ou FF par un échec en raison de l'HTTPS références pour le javascript ressources (pour certains impairs des raisons de sécurité). Leur remplacement était tout ce qui était nécessaire pour qu'il fonctionne sous IE et FF, comme on le voit ici:

    http://jsbin.com/ajoded/
    et
    http://jsfiddle.net/wN6tC/73/

    Ne fonctionne pas sous IE9. Ressemble peut également être configurée comme suit: $container.de données('isotope')...
    J'ai mis à jour le javascript références de ne pas être chargé à partir de HTTPS github et fourni deux plus test url un de jsfiddle l'autre pour jsbin.
    Merci pour le bon travail. Vous l'avez tous l'air très simple! Avez-vous de personnaliser au-delà des paramètres de base pour le faire fonctionner avec succès, ou tout autres problèmes de performances avec l'animation?
    Je n'ai pas besoin de paramétrer quoi que ce soit. J'ai utilisé le plus fondamental des exemples fournis sur chacun des auteurs de plugins. Je ne vois pas de problèmes de performances, le lazy load rend les images se chargent uniquement de la visibilité, ce qui est excellent. Dans un environnement de production, je vais probablement jouer avec l'option seuil de sorte qu'il commence à charger un petit peu plus tôt. Il serait bien d'utiliser une barre de défilement infini avec ces deux.
    J'ai eu du succès en utilisant cette méthode. Il a bien fonctionné pour moi sous Firefox, mais avoir des problèmes à obtenir que cela fonctionne sous IE. stackoverflow.com/questions/13004856/...

    OriginalL'auteur Anthony Hatzopoulos