Image Lazy Load: Diese Open-Source-Plug-Ins (jQuery), die das Laden von Bildern verzögern-js-Tutorial-php.cn

Image Lazy Load: Diese Open-Source-Plug-Ins (jQuery), die das Laden von Bildern verzögern

伊谢尔伦

Freigeben： 2016-11-29 09:17:37

Original

1202 Leute haben es durchsucht

Die Technologie zum verzögerten Laden von Bildern ist sehr praktisch für Websites mit hohem Datenverkehr. Derzeit werden Bilder häufig auf Websites verwendet, da sie den Server und die Bandbreite stark belasten. Dadurch kann die Anzahl der Website-Anfragen erheblich reduziert werden Netzwerkbandbreitenressourcen können reduziert werden.

Enthüllung

Dies ist eine sehr leichte Komponente zum Laden von Bildern

Sie unterstützt moderne Browser und IE7+ und hat fast 3.000 Sterne auf Github (folgen)

Verwenden Sie

Allgemeine Bilder

<img src="bg.png" data-src="img1.jpg" />

Nach dem Login kopieren

Für Retina-fähige Geräte

<img src="bg.png" data-src="img2.jpg" data-src-retina="img2-retina.jpg" />

Nach dem Login kopieren

Anwenden

$(document).ready(function() {
  $("img").unveil();
});

Nach dem Login kopieren

Support-Rückruf

$("img").unveil(200, function() {
  $(this).load(function() {
    this.style.opacity = 1;
  });
});

Nach dem Login kopieren

Unterstützt manuelles Auslösen

$("img").trigger("unveil");

Nach dem Login kopieren

jquery_lazyload

Es kann das Laden von Bildern großer Websites verzögern und sie beim Scrollen in den Bereich rendern. Es gibt 4.000 Follower auf Github.

Verwenden Sie

Referenz jQuery und lazyload.js

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

Nach dem Login kopieren

Bilder, die verzögert geladen werden müssen

<img class="lazy" data-original="img/example.jpg" width="640" height="480">

Nach dem Login kopieren

Anwenden

$(function() {
    $("img.lazy").lazyload();
});

Nach dem Login kopieren

Echo

Eine unabhängige Logo-artige JavaScript-Bildbibliothek mit verzögertem Laden. Verlässt sich nicht auf jQuery, nur 2 KB nach der Komprimierung.

Unterstützt IE8+

Verwenden Sie

<body>
  <img src="img/blank.gif" alt="Photo" data-echo="img/photo.jpg">
  <script src="dist/echo.js"></script>
  <script>
  echo.init({
    offset: 100,
    throttle: 250,
    unload: false,
    callback: function (element, op) {
      console.log(element, &#39;has been&#39;, op + &#39;ed&#39;)
    }
  });
  // echo.render(); //手动触发调用
  </script>
</body>

Nach dem Login kopieren

layzr.js

Eine Image Lazy Loading-Komponente, die erst vor ein paar Tagen veröffentlicht wurde, klein und schnell Abhängigkeiten (keine Abhängigkeit von jQuery), unterstützt auch Retina-Geräte.

<script src="layzr.min.js"></script>
<img src="optional/placeholder" data-layzr="normal/image" data-layzr-retina="optional/retina/image">
<script>
var layzr = new Layzr({ 
 attr: &#39;data-layzr&#39;, 
 retinaAttr: &#39;data-layzr-retina&#39;, 
 threshold: 0, 
 callback: null 
});
</script>

Nach dem Login kopieren

Update

Wie lässt man also den Server eine Reihe von IMGs in HTML in Data-SRC konvertieren? Tatsächlich ist es sehr einfach, nur ein paar Zeilen regulärer Regeln reichen aus. In node.js können Sie beispielsweise den src von img in data-src konvertieren (Sie können ihn direkt in der Konsole des Browsers ausführen, indem Sie F12 drücken). 🎜>

var html = &#39;包含 <img src="http://ourjs.com/img/weixin.jpg"> 的HTML&#39;
html = html.replace(/<img[^>]+>/g, function(imgstr, idx) {
  imgstr = imgstr.replace(&#39; src=&#39;, &#39; data-src=&#39;)
  return imgstr
})

Nach dem Login kopieren