Chargement différé avec “responsive” images (inconnu hauteur)

Je suis à l'aide d'une grille CSS système qui est basé sur des pourcentages. J'ai une grille avec 4 colonnes, chacune 25% de la largeur totale. J'ai sortie mon image balises à l'intérieur de chaque "25% de cellules", comme ceci:

<img src="foo.jpg" style="max-width:100%" />

Que le navigateur est redimensionnée, les images aussi redimensionner pour remplir à 100% de 25% de cellules. Le navigateur choisit une hauteur, comme si j'avais mis "height:auto" (qui est implicite quand il est omis).

Maintenant, je veux ajouter paresseux capacité de chargement. Le problème est que, avant les images sont chargées, leur hauteur sur la page est inconnue. Le navigateur doit télécharger l'image & observer ses proportions, et de calculer une hauteur. Avant cela, toutes les images ont une hauteur de 1px. Depuis chaque image a une hauteur de 1px, ils sont tous considérés comme "dans la fenêtre d'affichage" et sont immédiatement chargés.

Actuellement, j'ai une preuve de concept avant la sortie de la balise img, je calcule le ratio d'aspect des images sur le serveur, et la sortie de données de l'attribut:

<img src="foo.jpg" style="max-width:100%" data-aspect="1.7742" />

Ensuite, lors de l'événement "document prêt", je boucle sur chaque image et fixe "hauteur" de la valeur en pixels avant le chargement paresseux:

$('img').each(function() {
        var img = $(this);
        var width = img.width();
        var ratio = img.data('aspectratio');
        var height = width / ratio;
        $(this).css('height', height+'px');
    });

Cela semble être au travail, dans le sens où il n'est plus en charge de toutes les images en même temps, mais ne charge que les images que j'ai faites défiler jusqu'.

Cependant, il semble que cela pourrait causer de nouveaux problèmes, comme les images deviennent tendu que l'utilisateur redimensionne le navigateur. Je dois passer à la "hauteur" de retour à "auto" lorsqu'un rappel des incendies pour le chargement paresseux ayant achevé. Qui prendrait soin d'images que l'utilisateur voit - mais les images ci-dessous le pli aurait encore une mauvaise hauteur de la valeur du navigateur est redimensionnée. Chaque fois que le navigateur est redimensionnée, je serais à la parcourir toutes les images qui ont été précédemment en dessous de la fois, de mesurer leur mise à jour de la largeur, de lire leur rapport d'aspect, et de mettre à jour la nouvelle hauteur, puis relancer le chargement paresseux pour gérer tout ce qui est maintenant au-dessus du pli. Si je ne fais pas cela, le chargement peut être déclenché trop tôt ou trop tard en raison de ces images ayant la mauvaise valeur de hauteur.

Ma question est, est-il d'autres moyens de chargement différé des images avec des inconnus hauteurs, d'autres que la méthode que j'ai décrite ici, et ce que ramifications cela aurait-il? Est-il un inconvénient à ma méthode, d'autres que c'est une douleur de programme?

OriginalL'auteur Josh Ribakoff | 2014-05-01