Chargement paresseux images comment

Quatre options:

Voici trois options pour vous:

Utiliser une image d'arrière-plan

Kangkan de l'arrière-plan de réponse a ce couvert.

Si cela ne fonctionne pas pour vous, je suis en supposant que vous avez seulement besoin de l'aide avec le JavaScript activé choses, puisque vous avez dit que le non-JavaScript les utilisateurs verront une page différente.

Utiliser un plug-in

Pagination a été fait. Vous avez dit dans un commentaire que vous êtes à l'aide de jQuery. Il y a beaucoup de plugins jQuery pour la pagination. Trouver celui que vous aimez, et de l'utiliser. Ils seront de qualité variable, de sorte que vous aurez envie de les tester et d'examiner leur code, mais je suis sûr qu'il y a une bonne qualité.

Pagination côté serveur

C'est là la principale chargement de la page soit sans aucun produits à tous, ou seulement avec la première page de produits. En général, vous mettrais tous les produits dans un récipient, comme ceci:

<ul id='productList'>
</ul>

Alors vous auriez l'habitude des contrôles d'INTERFACE utilisateur pour le déplacement entre les pages de résultats. Vous auriez une ressource côté serveur qui a retourné des extraits de code HTML ou au format JSON de données que vous pouvez utiliser pour alimenter la liste. Je vais utiliser HTML pour la simplicité (bien que je serais probablement utiliser JSON dans une production de l'app, car il aurait tendance à être plus petits). Chaque entrée d'un produit est son propre bloc:

<li id='product-001'>
  <div>This is Product 001</div>
  <img src='http://www.gravatar.com/avatar/88ca83ed97a129596d6e8dd86deef994?s=32&d=identicon&r=PG'>
  <div>Blurb about Product 001</div>
</li>

...et puis la page renvoie autant que vous pensez est approprié. Vous demandez à la page à l'aide d'Ajax et de mise à jour de la liste des produits à l'aide de JavaScript. Puisque vous avez dit que vous utilisez jQuery, cela peut être carrément simple:

$('#productList').load("/path/to/paging/page?start=X&count=Y");

Voici un exemple de prototype (pas de code de production); il faux l'Ajax parce que JSBin me donnait Ajax questions.

Une grande page de téléchargement, puis JavaScript côté client pagination

Je ne suis pas sûr de savoir comment vous avez fait votre filtrage, mais si vous avez un élément qui contient les informations sur le produit, vous pouvez stocker l'URL de l'image dans un data-xyz attribut:

<div id='product-123' data-image='/images/foo.png'>

Puis lorsque votre code rend visible, vous pouvez facilement ajouter une img:

var prod, imgsrc, img;
prod = document.getElementById('product-123');
prod.style.display = 'block'; //Or whatever you're doing to show it
imgsrc = prod.getAttribute('data-image');
if (imgsrc) {
    img = document.createElement('img');
    img.src = imgsrc;
    prod.appendChild(img); //You'd probably put this somewhere else, but you get the idea
    prod.removeAttribute('data-image');
}

Modifier Dans un commentaire d'ailleurs vous dit que vous êtes à l'aide de jQuery. Si oui, une traduction de la ci-dessus pourrait ressembler à ceci:

var prod, imgsrc, img;
prod = $('#product-123');
prod.show();
imgsrc = prod.attr('data-image');
if (imgsrc) {
    $("<img/>").attr('src', imgsrc).appendTo(prod); //You'd probably put this somewhere else, but you get the idea
    prod.removeAttr('data-image');
}

Pas besoin de l'enlever à nouveau lorsque la clandestinité, car l'image sera déjà montré, c'est pourquoi j'ai supprimer l'attribut une fois que nous l'avons utilisé.

La raison pour laquelle j'ai utilisé le data- est le préfixe de validation: en HTML5, vous pouvez définir votre owwn data-xyz attributs et vos pages seront encore passer à la validation. Dans les versions précédentes de HTML, vous n'étiez pas autorisé à définir vos propres attributs (bien qu'en pratique, aucun des principaux navigateurs soucis) et donc, si vous avez utilisé votre propre attribut pour cela, la page ne serait pas valider.

Références (w3.org):

• Intégration personnalisée non-visible de données avec l'option -* attributs
• getElementById
• createElement
• getAttribute
• removeAttribute
• appendChild

Hors-sujet, mais un beaucoup de cette substance devient beaucoup plus facile si vous utilisez une bibliothèque JavaScript comme jQueryFermeturePrototypeYUIou plusieurs autres pour lisser les bords rugueux pour vous. (Vous avez dit depuis que vous êtes à l'aide de jQuery.)

Je suis assez certain qu'il n'est pas possible en HTML sans une sorte de Javascript intervention.

Après tout, si c'était possible de le faire sans scriping, pourquoi quelqu'un aurait-il mis en œuvre dans le code Javascript de la première place?

Ma question est: Combien de visiteurs avez-vous obtenir qui de nos jours n'ont pas Javascript activé? Je parie que c'est très peu. Et dans tous les cas, ces gens sont habitués à des sites qui ne sont pas pleinement fonctionnels lorsqu'ils ont désactivé javascript; votre site sera effectivement mieux que la plupart, si la seule différence qu'ils ont à mettre en place avec est plus lente vitesse de chargement.

(ps - je présume que vous êtes en utilisant Jquery plugin LazyLoad pour le Javascript activé les gens?)

J'ai écrit le code suivant pour mon propre site. J'ai utilisé JQuery:
1. Nom de toutes les classes, où tu veux chargement différé du même nom, dire "async"
2. Copiez le véritable emplacement de l'image à partir de 'src' de 'alt' attribut
3. Après la fin de la page de chargement de mon script permet de copier tous les 'alt' valeurs dans 'src'
Regardez l'exemple. C'est plein de travail exemple de code html:

<html> 
<head> 
<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
<script type="text/javascript">
        $(document).ready(function(){
            $('img.async').each(function(i, ele) {
                 $(ele).attr('src',$(ele).attr('alt'));
            });
        });
        </script> </head> <body> <img class="async" title="Гороскопы" alt="http://virtual-doctor.net/images/horoscopes.jpg" width="135" height="135"/> 
</body>
</html>

Vous pouvez sentir la vitesse réel du site où je l'ai utilisé
http://virtual-doctor.net/