js implementiert das verzögerte Laden von Webseitenbildern, um die Geschwindigkeit beim Öffnen von Webseiten zu verbessern. Javascript-Fähigkeiten

Es gibt viele Möglichkeiten, die Ladegeschwindigkeit von Webseiten zu verbessern. Die Verwendung von jquery.lazyload.js zur Implementierung des asynchronen verzögerten Ladens von Bildern ist eine gute Methode, um die Geschwindigkeit des Webseitenöffnens für Websites mit vielen Bildern zu verbessern die Seite. Auf der linken Seite der Spaltenliste auf der Code Jun-Website können Sie bei der Vorschau auf dem PC ein Artikel-Miniaturansicht-Anzeigemodul sehen, das die Ladezeit der Webseite bis zu einem gewissen Grad verlängert. In diesem Artikel wird die asynchrone Methode zum verzögerten Laden von Bildern verwendet, um die Seitenladegeschwindigkeit dieser Website zu verbessern.

Bilder werden asynchron geladen, was bedeutet, dass nicht alle Bilder auf der Seite gleichzeitig geladen und angezeigt werden müssen. Wenn der Benutzer die Bildlaufleiste an eine bestimmte Position verschiebt, wird das Bild an der entsprechenden Position geladen Dies kann die Ladegeschwindigkeit der Webseite erheblich verbessern.

Es gibt viele technische Artikel mit vielen Bildern. Wenn beim Öffnen der Webseite alle Bilder auf einmal geladen werden müssen, muss der Benutzer definitiv sehr lange warten. Dieser Ansatz führt zu einer erheblichen Beeinträchtigung des Benutzererlebnisses und es ist nicht erforderlich, alle Bilder auf der Seite auf einmal zu laden. Das asynchrone verzögerte Laden von Bildern ist der sinnvollste und geeignetste Ansatz im Webdesign.

Wir verwenden jquery.lazyload.js, um das asynchrone verzögerte Laden von Bildern zu implementieren. Denken Sie daran, zuerst jQuery zu laden.

1. JS-Plugin importieren:

<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript" src="jquery.lazyload.js"></script>

2. Fügen Sie JavaScript-Code in die Seite ein:

$(document).ready(function($){
$("img").lazyload({
placeholder:"grey.gif", //加载图片前的占位图片
effect:"fadeIn" //加载图片使用的效果(淡入)
});
});

Durch die beiden oben genannten Schritte können Sie das asynchrone verzögerte Laden von Webseitenbildern problemlos implementieren.

Lassen Sie mich Ihnen eine detaillierte Einführung geben:
Manchmal sehen wir einige große Websites, wenn Sie zur entsprechenden Zeile scrollen, werden die Bilder in der aktuellen Zeile sofort geladen. Auf diese Weise werden beim Öffnen der Seite nur die Bilder im sichtbaren Bereich geladen hinzugefügt, und die anderen Bilder werden nicht hinzugefügt, was das Laden der Seite beschleunigt.

Empfohlen: Verwenden Sie das JQuery-Image-Lazy-Loading-Plug-In jquery.lazyload, um eine Bildverzögerung zu erreichen

Umsetzungsprinzip:

Ändern Sie alle Bilder, die verzögert geladen werden müssen, in das folgende Format:

<img lazy_src="图片路径" border="0"/>

Wenn die Seite dann geladen wird, speichern Sie alle Bilder mit lazy_src in einem Array, berechnen Sie dann den oberen Rand des sichtbaren Bereichs beim Scrollen und machen Sie dann den oberen Rand der verzögert geladenen Bilder kleiner als den aktuell sichtbaren Bereich (d. h image Der src-Wert des im sichtbaren Bereich erscheinenden Bildes wird durch lazy_src (Bild laden) ersetzt:

JS-Code:

 lazyLoad = (function() {
 
  var map_element = {};
 
  var element_obj = [];
 
  var download_count = 0;
 
  var last_offset = -1;
 
  var doc_body;
 
  var doc_element;
 
  var lazy_load_tag;
 
  function initVar(tags) {
 
    doc_body = document.body;
 
    doc_element = document.compatMode == 'BackCompat' ? doc_body : document.documentElement;
 
    lazy_load_tag = tags || ["img", "iframe"];
 
  };
 
  function initElementMap() {
 
    var all_element = [];
 
    //从所有相关元素中找出需要延时加载的元素
 
    for (var i = 0,
 
len = lazy_load_tag.length; i < len; i++) {
 
      var el = document.getElementsByTagName(lazy_load_tag[i]);
 
      for (var j = 0,
 
len2 = el.length; j < len2; j++) {
 
        if (typeof (el[j]) == "object" && el[j].getAttribute("lazy_src")) {
 
          element_obj.push(all_element[key]);
 
        }
 
      }
 
    }
 
  
 
    for (var i = 0,
 
len = element_obj.length; i < len; i++) {
 
      var o_img = element_obj[i];
 
      var t_index = getAbsoluteTop(o_img); //得到图片相对document的距上距离
 
      if (map_element[t_index]) {
 
        map_element[t_index].push(i);
 
      } else {
 
        //按距上距离保存一个队列
 
        var t_array = [];
 
        t_array[0] = i;
 
        map_element[t_index] = t_array;
 
        download_count++; //需要延时加载的图片数量
 
      }
 
    }
 
  
 
  };
 
  function initDownloadListen() {
 
    if (!download_count) return;
 
    var offset = (window.MessageEvent && !document.getBoxObjectFor) &#63; doc_body.scrollTop : doc_element.scrollTop;
 
    //可视化区域的offtset=document的高+
 
    var visio_offset = offset + doc_element.clientHeight;
 
    if (last_offset == visio_offset) {
 
      setTimeout(initDownloadListen, 200);
 
      return;
 
    }
 
    last_offset = visio_offset;
 
    var visio_height = doc_element.clientHeight;
 
    var img_show_height = visio_height + offset;
 
    for (var key in map_element) {
 
      if (img_show_height > key) {
 
        var t_o = map_element[key];
 
        var img_vl = t_o.length;
 
        for (var l = 0; l < img_vl; l++) {
 
          element_obj[t_o[l]].src = element_obj[t_o[l]].getAttribute("lazy_src");
 
        }
 
        delete map_element[key];
 
        download_count--;
 
      }
 
    }
 
    setTimeout(initDownloadListen, 200);
 
  };
 
  function getAbsoluteTop(element) {
 
    if (arguments.length != 1 || element == null) {
 
      return null;
 
    }
 
    var offsetTop = element.offsetTop;
 
    while (element = element.offsetParent) {
 
      offsetTop += element.offsetTop;
 
    }
 
    return offsetTop;
 
  }
 
  function init(tags) {
 
    initVar(tags);
 
    initElementMap();
 
    initDownloadListen();
 
  };
 
  return {
 
    init: init
 
  }
 
})();

Verwendung: Ändern Sie die Quelle des Bildes, das verzögert auf die Seite geladen werden muss, in lazy_src, fügen Sie dann die oben genannten js am Ende des Körpers ein und rufen Sie dann auf: lazyLoad.init ();
Mit der Teasing-Methode kann Firebug verwendet werden, um zu überprüfen, ob das temporäre Bild verzögert geladen wird.
Außerdem:
Wenn auf Ihrer Seite eine Spalte mit Inhaltsumschaltung vorhanden ist, werden die Bilder im Inhalt beim Umschalten möglicherweise nicht angezeigt. Die Lösung besteht darin, die Bilder während des Inhalts separat zu laden, z. B.:

///切换内容的代码…
 
 chlid.find("img[init_src]").each(function(){
 
  $(this).attr("src",$(this).attr("init_src"));
 
  $(this).removeAttr("init_src");
 
 });

Das sogenannte asynchrone Laden von Bildern bedeutet, dass Sie nicht alle Bilder auf einmal laden müssen. Man kann es als verzögertes Laden oder gepuffertes Laden bezeichnen.

Mal sehen, ob Sie dieses Bedürfnis haben: Wenn Sie beim Laden des Artikels viele Bilder laden, verlangsamt dies zweifellos die Ladegeschwindigkeit und lässt den Benutzer länger warten Ich möchte einen solchen Artikel finden, der es der Webseite ermöglicht, nur Bilder zu laden, die nicht innerhalb des Sichtfelds des Browsers erscheinen Um diesen Effekt zu erzielen, wird die Bildlaufleiste verwendet.
Lazyload.js ist eigentlich ein Plug-in für jQuery. Sein vollständiger Name ist jquery.lazyload.js. Sie können seine Funktion schon am Namen erkennen – es bedeutet Lazy Loading. Da es in Javascript geschrieben ist, eignet es sich für alle Webseiten, einschließlich WordPress.

Wenn Sie Lazyload verwenden möchten, müssen Sie zuerst jQuery laden, das auf jQuery angewiesen ist, um Effekte zu erzielen.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass jeder ein tieferes Verständnis von js hat, um das verzögerte Laden von Webseitenbildern zu implementieren.