Wie man HTML, CSS und jQuery verwendet, um fortgeschrittene Techniken zum verzögerten Laden von Bildern zu implementieren

So verwenden Sie HTML, CSS und jQuery, um erweiterte Techniken zum verzögerten Laden von Bildern zu implementieren

Lazy Loading ist ein technisches Mittel zur Verbesserung der Leistung von Webseiten und eignet sich besonders für Webseiten, die eine große Anzahl von Bildern enthalten. Durch die Verwendung von HTML, CSS und jQuery können wir das verzögerte Laden von Bildern problemlos implementieren, um das Laden von Webseiten zu beschleunigen und die Benutzererfahrung zu verbessern. In diesem Artikel wird erläutert, wie diese drei Technologien zur Implementierung erweiterter Techniken zum verzögerten Laden von Bildern verwendet werden, und es werden spezifische Codebeispiele aufgeführt.

1. HTML-Vorbereitung
In HTML müssen wir das src-Attribut jedes Bildes, das verzögert geladen werden muss, durch ein benutzerdefiniertes data-src-Attribut ersetzen. Gleichzeitig können wir einen Platzhalter festlegen, um den progressiven Ladeeffekt von Bildern zu erzielen.

<img src="/static/imghw/default1.png"  data-src="path/to/image.jpg"  class="lazy"  data- alt="image">

2. CSS-Stileinstellung
Um die Platzhalterbildanzeige vor dem Laden des Bildes beizubehalten, müssen wir CSS verwenden, um das img-Element festzulegen. Um einen progressiven Ladeeffekt zu erzielen, können wir gleichzeitig auch einen Übergangseffekt einstellen.

img {
  width: 100%;
  height: auto;
  max-width: 100%;
  opacity: 0;
  transition: opacity 0.3s ease-in;
}
img.loaded {
  opacity: 1;
}

3. jQuery implementiert Lazy Loading
Es ist sehr einfach, Lazy Loading mit jQuery zu implementieren. Wir können das Ereignis $(window).on('scroll', function(){}) verwenden, um auf Scroll-Ereignisse zu warten und Lazy Loading auszulösen, indem wir feststellen, ob das Bild sichtbar ist.

$(window).on('scroll', function() {
  $('img').each(function() {
    if (isElementInViewport($(this)) && !$(this).hasClass('loaded')) {
      $(this).attr('src', $(this).data('src')).addClass('loaded');
    }
  });
});
function isElementInViewport(el) {
  var rect = el.get(0).getBoundingClientRect();
  return (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
  );
}

Der obige Code überwacht das Scroll-Ereignis und beurteilt jedes img-Element. Wenn sich das Element im sichtbaren Bereich befindet und nicht geladen wurde, weisen Sie src den Wert des data-src-Attributs zu und fügen Sie den Namen der geladenen Klasse hinzu zu Tags geladen.

4. Fragmentladen und Leistungsoptimierung
Um die Leistung weiter zu verbessern, können wir das Bild zum Laden in mehrere Fragmente aufteilen, anstatt alle Bilder auf einmal zu laden. Dadurch können Leistungsprobleme vermieden werden, die dadurch entstehen, dass die Seite eine große Anzahl von Bildern gleichzeitig anfordert.

$(window).on('scroll', function() {
  var windowHeight = $(window).height();
  var scrollTop = $(window).scrollTop();
  $('img:not(.loaded)').each(function() {
    if (isElementInViewport($(this), windowHeight, scrollTop)) {
      $(this).attr('src', $(this).data('src')).addClass('loaded');
    }
  });
});
function isElementInViewport(el, windowHeight, scrollTop) {
  var rect = el.get(0).getBoundingClientRect();
  return (
    rect.top >= (scrollTop - windowHeight) &&
    rect.top <= (scrollTop + windowHeight * 2)
  );
}

Im obigen Code ermitteln wir, ob sich jedes Bild im sichtbaren Bereich befindet, indem wir die Höhe des Fensters und die Position der Bildlaufleiste ermitteln. Es werden nur Bilder im sichtbaren Bereich geladen.

Zusammenfassend lässt sich sagen, dass wir durch die Verwendung von HTML, CSS und jQuery problemlos fortschrittliche Techniken zum verzögerten Laden von Bildern implementieren und die Ladegeschwindigkeit und Benutzererfahrung von Webseiten verbessern können. Durch das Festlegen benutzerdefinierter data-src-Attribute, CSS-Stile und jQuery-Ereignis-Listener sowie die Kombination von Fragmentladen und Leistungsoptimierung können wir das Ladeverhalten von Bildern flexibler steuern und das Benutzererlebnis und die Seitenleistung verbessern. Ich hoffe, dass die in diesem Artikel bereitgestellten Codebeispiele für Sie hilfreich sind!

Das obige ist der detaillierte Inhalt vonWie man HTML, CSS und jQuery verwendet, um fortgeschrittene Techniken zum verzögerten Laden von Bildern zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!