Wie lade ich nur ein Bild, wenn der Benutzer dorthin scrollt

Question

Viele Websites scheinen nur Bilder herunterzuladen oder Teile des Dokuments zu generieren (z. B. für Bewertungen), wenn der Benutzer weit genug nach unten scrollt, um sie tatsächlich zu sehen.

Dies wird Ihnen offensichtlich Seiten schneller laden und Bandbreite für jeden sparen, der nicht nach unten scrollt.

Wie wird das gemacht, idealerweise mit jquery? Oder um es auf andere Weise zu fragen, wie stelle ich fest, dass ein fehlendes Bild gerade in den Blick gerollt ist und abgerufen werden muss?

Answer 1

Es gibt Plugins dafür. Here's one ...

Answer 2

Hier ist mein eigenes. Habe Spaß. (Erfordert jQuery nicht!)

Geprüft: IE 5.5+, FF 2 +, Chrome, Opera 9.6+

Verbrauch:

1. Ihre lazyloaded Bilder sollten ihre real src in einem thumb-Attribut

2. Fügen Sie einfach die Javascript-Datei inline oder extern ein.

3. Wenn Sie es auf Ihrer gesamten Seite nicht verwenden möchten, können Sie tun:

   LazyImg().destroy(); // stop global fetching 
   LazyImg("watch-only-this-div"); 
   

   Hinweis: Wenn Sie die Datei eine globale Instanz enthalten ist bereits erstellt das gesamte Dokument watchin. Sie müssen dies zuerst stoppen und Ihre eigene Instanz starten.

   4. eine benutzerdefinierte Set-Offset für Prefetching (wie weit unterhalb der Falte sollte das Bild geholt werden)

      // watch the whole document 
      // prefetch offset: 300px 
      LazyImg(document, 300); 
      

Code:

// 
// LAZY Loading Images 
// 
// Handles lazy loading of images in one or more targeted divs, 
// or in the entire page. It also keeps track of scrolling and 
// resizing events, and removes itself if the work is done. 
// 
// Licensed under the terms of the MIT license. 
// 
// (c) 2010 Balázs Galambosi 
// 

(function(){ 

// glocal variables 
var window = this, 
    instances = {}, 
    winH; 

// cross browser event handling 
function addEvent(el, type, fn) { 
    if (window.addEventListener) { 
    el.addEventListener(type, fn, false); 
    } else if (window.attachEvent) { 
    el.attachEvent("on" + type, fn); 
    } else { 
    var old = el["on" + type]; 
    el["on" + type] = function() { old(); fn(); }; 
    } 
} 

// cross browser event handling 
function removeEvent(el, type, fn) { 
    if (window.removeEventListener) { 
    el.removeEventListener(type, fn, false); 
    } else if (window.attachEvent) { 
    el.detachEvent("on" + type, fn); 
    } 
} 

// cross browser window height 
function getWindowHeight() { 
    if (window.innerHeight) { 
    winH = window.innerHeight; 
    } else if (document.documentElement.clientHeight) { 
    winH = document.documentElement.clientHeight; 
    } else if (document.body && document.body.clientHeight) { 
    winH = document.body.clientHeight; 
    } else {  // fallback: 
    winH = 10000; // just load all the images 
    } 
    return winH; 
} 

// getBoundingClientRect alternative 
function findPos(obj) { 
    var top = 0; 
    if (obj && obj.offsetParent) { 
    do { 
     top += obj.offsetTop || 0; 
     top -= obj.scrollTop || 0; 
    } while (obj = obj.offsetParent); // 
    return { "top" : top }; 
    } 
} 

// top position of an element 
var getTopPos = (function() { 
    var dummy = document.createElement("div"); 
    if (dummy.getBoundingClientRect) { 
    return function(el) { 
     return el.$$top || el.getBoundingClientRect().top; 
    }; 
    } else { 
    return function(el) { 
     return el.$$top || findPos(el).top; 
    }; 
    } 
})(); 

// sorts images by their vertical positions 
function img_sort(a, b) { 
    return getTopPos(a) - getTopPos(b); 
} 

// let's just provide some interface 
// for the outside world 
var LazyImg = function(target, offset) { 

    var imgs, // images array (ordered) 
     last, // last visible image (index) 
     id,  // id of the target element 
     self; // this instance 

    offset = offset || 200; // for prefetching 

    if (!target) { 
    target = document; 
    id = "$document"; 
    } else if (typeof target === "string") { 
    id = target; 
    target = document.getElementById(target); 
    } else { 
    id = target.id || "$undefined"; 
    } 

    // return if this instance already exists 
    if (instances[id]) { 
    return instances[id]; 
    } 

    // or make a new instance 
    self = instances[id] = { 

    // init & reset 
    init: function() { 
     imgs = null; 
     last = 0; 
     addEvent(window, "scroll", self.fetchImages); 
     self.fetchImages(); 
     return this; 
    }, 

    destroy: function() { 
     removeEvent(window, "scroll", self.fetchImages); 
     delete instances[id]; 
    }, 

    // fetches images, starting at last (index) 
    fetchImages: function() { 

     var img, temp, len, i; 

     // still trying to get the target 
     target = target || document.getElementById(id); 

     // if it's the first time 
     // initialize images array 
     if (!imgs && target) { 

     temp = target.getElementsByTagName("img"); 

     if (temp.length) { 
      imgs = []; 
      len = temp.length; 
     } else return; 

     // fill the array for sorting 
     for (i = 0; i < len; i++) { 
      img = temp[i]; 
      if (img.nodeType === 1 && img.getAttribute("thumb")) { 

       // store them and cache current 
       // positions for faster sorting 
       img.$$top = getTopPos(img); 
       imgs.push(img); 
      } 
     } 
     imgs.sort(img_sort); 
     } 

     // loop through the images 
     while (imgs[last]) { 

     img = imgs[last]; 

     // delete cached position 
     if (img.$$top) img.$$top = null; 

     // check if the img is above the fold 
     if (getTopPos(img) < winH + offset) { 

      // then change the src 
      img.src = img.getAttribute("thumb"); 
      last++; 
     } 
     else return; 
     } 

     // we've fetched the last image -> finished 
     if (last && last === imgs.length) { 
     self.destroy(); 
     } 
    } 
    }; 
    return self.init(); 
}; 

// initialize 
getWindowHeight(); 
addEvent(window, "load", LazyImg().fetchImages); 
addEvent(window, "resize", getWindowHeight  ); 
LazyImg(); 

window.LazyImg = LazyImg; 

}());