图片处理

图片的预加载

接受一个图片的URL作为参数，创建一个新的Image对象，并设置其src属性。当图片加载完成后，会触发onload事件，此时可以在控制台输出一条消息，或者执行其他操作，比如将图片添加到页面中。如果图片加载失败，会触发onerror事件

function preloadImage(url) {
    // 创建一个新的Image对象
    var img = new Image();
    // 设置图片的src属性为要预加载的图片地址
    img.src = url;
    // 可以添加一个事件监听器来检测图片是否加载完成
    img.onload = function() {
        console.log('图片已加载完成');
        // 在这里可以执行一些操作，比如将图片添加到DOM中
    };
    // 可以添加一个事件监听器来检测图片加载失败的情况
    img.onerror = function() {
        console.error('图片加载失败');
    };
}

// 使用示例
preloadImage('path/to/your/image.jpg');

图片懒加载

// html内容
// <img src="./loading.jpg" data-src="https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg">
// <img src="./loading.jpg" data-src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg">

function observerImg() {
  let imgList = document.getElementsByTagName("img"); 
  let observer = new IntersectionObserver(list => {
    // 回调的数据是一个数组
    list.forEach(item => {
      // 判断元素是否出现在视口
      if (item.intersectionRatio > 0) {
        // 设置img的src属性
        item.target.src = item.target.getAttribute("data-src");
        // 设置src属性后，停止监听
        observer.unobserve(item.target);
      }
    });
  });
  for (let i = 0; i < imgList.length; i++) {
    // 监听每个img元素
    observer.observe(imgList[i]);
  }
}


function lazyLoadImages() {
  const imgs = document.querySelectorAll('img[data-src]');

  imgs.forEach(img => {
    const rect = img.getBoundingClientRect();
    if (rect.top < window.innerHeight && rect.bottom > 0) {
      img.src = img.getAttribute('data-src');
      img.removeAttribute('data-src');
    }
  });
}

// 可以在适当的时候调用这个函数，比如在滚动事件中
window.addEventListener('scroll', lazyLoadImages);

获取页面所有图片的src，得注意css部分的获取，有个dom方法

1. 获取文档中的所有节点：使用 document.getElementsByTagName('*') 方法获取文档中的所有节点。

2. 遍历节点：使用循环遍历获取到的节点。

3. 检查节点是否为图片节点：对于每个节点，使用 node.nodeType 属性检查节点类型是否为 1（元素节点），并且节点的 tagName 属性是否为 IMG（图片元素）。

4. 获取图片的 src 属性：如果节点是图片节点，使用 node.getAttribute('src') 方法获取图片的 src 属性。

5. 检查 CSS 中的背景图片：对于每个节点，还需要检查其是否有 CSS 样式设置了背景图片。可以使用 window.getComputedStyle(node) 方法获取节点的计算后的样式，然后检查 backgroundImage 属性是否包含图片路径。

6. 处理背景图片的路径：如果 backgroundImage 属性包含图片路径，需要将其提取出来。

function getAllImageSrcs() {
  const images = [];
  const nodes = document.getElementsByTagName('*');

  for (let i = 0; i < nodes.length; i++) {
    const node = nodes[i];

    if (node.nodeType === 1 && node.tagName === 'IMG') {
      images.push(node.getAttribute('src'));
    } else if (window.getComputedStyle(node).backgroundImage.includes('url')) {
      const backgroundImage = window.getComputedStyle(node).backgroundImage.replace(/^url\(['"]?/, '').replace(/['"]?\)$/, '');
      images.push(backgroundImage);
    }
  }

  return images;
}

console.log(getAllImageSrcs());