Manchmal scheitert ein Vorhaben an Kleinigkeiten:
Ich verwende RokSprocket und musste im Firefox-Inspector feststellen, dass alle Bilder in allen Showcases beim Aufruf der Webseite geladen werden, also auch alle, die überhaupt nicht im Viewport liegen. Also benötige ich eine Funktion, die sich LazyLoading nennt und für die ich hier ein schönes kleines Script mit gutem visuellem Ergebnis fand: https://codepen.io/rposbo/pen/EKmXvo
Das Script „wartet” anscheinend gleich am Anfang mit "var lazy = []" darauf, dass per CSS die Klasse "lazy" benutzt wird, um in Aktion treten zu können.
In der Demo des o.gh. Link von Codepen werden Bilder, die nicht geladen werden sollen, wenn sie außerhalb des Viewport liegen, wie folgt in das HTML eingebunden:
<img
src="images/grafik/spacer.gif"
class="lazy"
data-src="images/sample.jpg"
alt="Sample"
width="300px" />Die Demo funktioniert bei Codepen einwandfrei, vermutlich weil das Script inline im HTML liegt. Bei mir funzt das nicht, weil ich Inline-Scripte und Inline-CSS vermeiden will und das kleine Script in eine Datei gelegt habe, die mit dem Template verknüpft ist und von dort eingebunden wird und nun anscheinend die Verbindung zwischen "var lazy = []" einerseits und der Klasse ".lazy" andererseits wohl nicht erkannt wird.
Wie muss ich die Verbindung zwischen den beiden in einer CSS-Datei herstellen? Gibt es so etwas wie: .class {src: "lazy.js";}
Für Interessierte hier auch das Script aus dem o.g. Link:
<script>
var lazy = [];
registerListener('load', setLazy);
registerListener('load', lazyLoad);
registerListener('scroll', lazyLoad);
registerListener('resize', lazyLoad);
function setLazy(){
document.getElementById('listing').removeChild(document.getElementById('viewMore'));
document.getElementById('nextPage').removeAttribute('class');
lazy = document.getElementsByClassName('lazy');
console.log('Found ' + lazy.length + ' lazy images');
}
function lazyLoad(){
for(var i=0; i<lazy.length; i++){
if(isInViewport(lazy[i])){
if (lazy[i].getAttribute('data-src')){
lazy[i].src = lazy[i].getAttribute('data-src');
lazy[i].removeAttribute('data-src');
}
}
}
cleanLazy();
}
function cleanLazy(){
lazy = Array.prototype.filter.call(lazy, function(l){ return l.getAttribute('data-src');});
}
function isInViewport(el){
var rect = el.getBoundingClientRect();
return (
rect.bottom >= 0 &&
rect.right >= 0 &&
rect.top <= (window.innerHeight || document.documentElement.clientHeight) &&
rect.left <= (window.innerWidth || document.documentElement.clientWidth)
);
}
function registerListener(event, func) {
if (window.addEventListener) {
window.addEventListener(event, func)
} else {
window.attachEvent('on' + event, func)
}
}
</script>Sorry, aber die vollständige Erklöärung dieses Scripts findet sich nicht bei Codepen, sondern hier:
https://www.robinosborne.co.uk…-dont-rely-on-javascript/
Mag sein, dass dieser Link auch anderen weiter hilft, wenn viele Bilder die Ladezeiten der Website belasten.
