/**
 * <img src='data/img/placeholder.png' data-src='data/img/SLUG.jpg' alt='NAME'>
 * 处理 data-src 属性的过程
 */
let imagesToLoad = document.querySelectorAll('img[data-src]');
const loadImages = (image) => {
  image.setAttribute('src', image.getAttribute('data-src'));
  image.onload = () => {
    image.removeAttribute('data-src');
  };
};
/** 遍历所有的图片，然后加载它们  */
//imagesToLoad.forEach((img) => {
 //   loadImages(img);
//});
/** 只有在用户向下滚动页面，并且图片显示在屏幕上时，才会开始加载目标图片。 */
if('IntersectionObserver' in window) {
  const observer = new IntersectionObserver((items, observer) => {
    items.forEach((item) => {
      if(item.isIntersecting) {
        loadImages(item.target);
        observer.unobserve(item.target);
      }
    });
  });
  imagesToLoad.forEach((img) => {
    observer.observe(img);
  });
} else {
  imagesToLoad.forEach((img) => {
    loadImages(img);
  });
}
  /** 为了让整个过程视觉效果更好，图片占位符的样式用 CSS 做了模糊处理：
   * 我们一开始用模糊滤镜来渲染图像，然后就可以实现从模糊到清晰图像的过渡效果：
  
   article img[data-src] {
    filter: blur(0.2em);
  }
  
  article img {
    filter: blur(0em);
    transition: filter 0.5s;
  }
 */


/***这将导致文件内的任何内容都不会运行，除非视口宽度为 480px 或更小。与以上代码配合完成某些功能 */
  if (window.matchMedia("(max-width: 480px)").matches) {
    // The whole of brick.js goes here!
  }