jQuery Unendliche Scrolling / faul laden

Ich bin derzeit die Neugestaltung meiner website und habe auf der Suche in die Verwendung von JavaScript und jQuery. Hier ist was ich habe, so weit: http://www.tedwinder.co.uk/gallery2/.

Meine vision ist, dass alle Fotos auf einer Seite, die der Benutzer kann einen Bildlauf durch, so wie jetzt. Allerdings verstehe ich die Einschränkungen und Auswirkungen mit 50+ large-ish Bilder auf einer Seite und betrachtet mit unendlich vielen Blättern und lazy loading, was ich verstehen würde, nur die Bilder laden, wenn der Benutzer bekommt Sie, oder wenn Sie klicken Sie auf "Mehr" - link?

So, meine Frage ist: wäre das reduzieren der Seite laden, wie genau würde ich mich über die Implementierung von infinite scrolling/lazy loading und würde das funktionieren, oder könnten Sie sich vorstellen, dass es eine mehr effektive Art, dies zu tun?

Dank,
Ted

InformationsquelleAutor der Frage Ted | 2010-01-31

  1. 12

    Dies ist ein ziemlich gutes plugin für jQuery, mit Bild lazy loading.

    http://www.appelsiini.net/projects/lazyload

    Bilder unter die Falten nicht geladen werden, bis Sie Bildlauf in die Ansicht.

    Wird es reduzieren auf die Bandbreite Ihrer Website, aber wenn Sie dont haben eine Menge Verkehr wird es nicht machen viel Unterschied.

    Ein Beispiel für diese Technik in Verwendung, überprüfen Sie heraus http://mashable.com/

    InformationsquelleAutor der Antwort Pepper

  2. 4

    versuchen das jQuery Lazy Scroll-Plugin Laden
    http://code.google.com/p/jquerylazyscrollloading/

    InformationsquelleAutor der Antwort h920526

  3. 3

    Können Sie versuchen, diese jQuery-plugin, das ich schrieb, verwendet html-Kommentare zu lazy load beliebige bits von html, einschließlich Bilder:

    jQuery Lazy Loader-Blog-Post

    jQuery Lazy Loader-Plugin-Seite

    Hier ein Beispiel:

    <pre class=”i-am-lazy” ><!–
    <img src=”some.png” />
 –></pre>

<pre class=”i-am-lazy” ><!–
    <div>Any, html css img background, whatever. <img src=”some.png” /> </div>
–></pre>

<script type=”text/javascript” src=”jquery.lazyloader.js” ></script>
<script type=”text/javascript” >
$(document).ready( function()
{
    $(’pre.i-am-lazy’).lazyLoad();
});
</script>

    Also im Grunde wickeln Sie die Inhalte, die Sie wollen, um lazy load mit einem Platzhalter-tag und und innere html-Kommentar. Wenn der Platzhalter wird sichtbar im viewport, es ist ersetzt durch die html-Zeichenfolge im Kommentar.

    Können Sie jeden tag für den Platzhalter, aber ich mag pre, weil es macht so 0 dimension, wenn es nur ein Kommentar-innen.

    Hoffe, das hilft!
    @MW_Collins

    InformationsquelleAutor der Antwort Michael Collins

  4. 0

    Hier sind zwei weitere JQuery-plugins, die verzögertes laden /unendliche scroll:

    http://jscroll.com/

    http://www.infinite-scroll.com/infinite-scroll-jquery-plugin/

    InformationsquelleAutor der Antwort Paul B. Hartzog

Schreibe einen Kommentar