javascript实现图片预加载和懒加载

下面是详细的“JavaScript实现图片预加载和懒加载”的攻略教程。

一、图片预加载

1.1 概述

图片预加载是指在页面加载时，提前将需要用到的图片资源加载到缓存中，等到需要显示时再从缓存中获取，以此提高页面的加载速度和用户体验。

1.2 实现方法

1.2.1 使用Image对象

使用Image对象的onload事件，可以在图片加载完成后执行相应的操作。

function preLoadImage(url) {
  var img = new Image();
  img.src = url;

  if (img.complete) {  // 如果图片已经缓存，则直接返回
    return;
  }

  img.onload = function() {  // 加载完成后执行相应操作
    console.log('图片预加载完成: ' + url);
  };
}

例如，可以在页面加载时就进行图片预加载：

preLoadImage('/images/1.jpg');
preLoadImage('/images/2.jpg');
preLoadImage('/images/3.jpg');

1.2.2 使用XMLHttpRequest对象

使用XMLHttpRequest对象，可以通过ajax的方式加载图片资源。

function preLoadImage(url) {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', url, true);
  xhr.responseType = 'blob';
  xhr.onload = function() {  // 加载完成后执行相应操作
    console.log('图片预加载完成: ' + url);
  };
  xhr.send();
}

1.2.3 示例说明

下面是一个示例，通过Image对象实现图片预加载。

<!DOCTYPE html>
<html>
<head>
  <title>图片预加载示例</title>
</head>
<body>
  <h1>图片预加载示例</h1>
  <img src="/images/placeholder.png" data-src="/images/1.jpg">
  <img src="/images/placeholder.png" data-src="/images/2.jpg">
  <img src="/images/placeholder.png" data-src="/images/3.jpg">
  <script>
    var images = document.querySelectorAll('img[data-src]');
    Array.prototype.forEach.call(images, function(img) {
      preLoadImage(img.dataset.src);
    });
    function preLoadImage(url) {
      var img = new Image();
      img.src = url;

      if (img.complete) {  // 如果图片已经缓存，则直接返回
        return;
      }

      img.onload = function() {  // 加载完成后设置img的src属性
        console.log('图片预加载完成: ' + url);
        img.src = url;
      };
    }
  </script>
</body>
</html>

二、图片懒加载

2.1 概述

图片懒加载是指在页面滚动至特定位置时，再去加载图片资源，以节省网络带宽和提高页面加载速度。这个特定位置可以是图片节点出现在浏览器可视区域内，也可以是图片节点距离浏览器可视区域顶部的距离。

2.2 实现方法

2.2.1 判断图片是否在浏览器可视区域内

使用getBoundingClientRect()方法可以获取元素的位置和尺寸信息。

function inViewPort(el) {
  var rect = el.getBoundingClientRect();

  return rect.bottom > 0 && rect.top < window.innerHeight;
}

例如，可以在页面滚动时，判断图片是否在可视区域内，并在可视区域内则加载图片：

window.addEventListener('scroll', function() {
  Array.prototype.forEach.call(images, function(img) {  // images是所有需要lazyload的图片
    if (inViewPort(img)) {
      img.src = img.dataset.src;
      img.removeAttribute('data-src');
    }
  });
});

2.2.2 图片距离页面顶部的距离

如果要实现图片距离页面顶部的距离，则可以使用el.offsetTop属性或getBoundingClientRect()方法。

function inViewPort(el) {
  var rect = el.getBoundingClientRect();
  var top = rect.top;
  var height = rect.height;

  while (el.offsetParent) {
    el = el.offsetParent;
    top += el.offsetTop;
  }

  return top < (window.pageYOffset + window.innerHeight) && (top + height) > window.pageYOffset;
}

2.2.3 示例说明

下面是一个示例，通过getBoundingClientRect()方法实现图片懒加载。

<!DOCTYPE html>
<html>
<head>
  <title>图片懒加载示例</title>
</head>
<body>
  <h1>图片懒加载示例</h1>
  <img src="/images/placeholder.png" data-src="/images/1.jpg">
  <img src="/images/placeholder.png" data-src="/images/2.jpg">
  <img src="/images/placeholder.png" data-src="/images/3.jpg">
  <script>
    var images = document.querySelectorAll('img[data-src]');

    window.addEventListener('scroll', function() {
      Array.prototype.forEach.call(images, function(img) {
        if (inViewPort(img)) {
          img.src = img.dataset.src;
          img.removeAttribute('data-src');
        }
      });
    });

    function inViewPort(el) {
      var rect = el.getBoundingClientRect();
      var top = rect.top;
      var height = rect.height;

      while (el.offsetParent) {
        el = el.offsetParent;
        top += el.offsetTop;
      }

      return top < (window.pageYOffset + window.innerHeight) && (top + height) > window.pageYOffset;
    }
  </script>
</body>
</html>

以上就是关于“JavaScript实现图片预加载和懒加载”的完整攻略，希望对你有所帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：javascript实现图片预加载和懒加载 - Python技术站