1

我正在尝试将图像延迟加载到 GitHub 网站上。当我只在我的桌面上运行 HTML 文件而不是在 GitHub 网站上时，我能够加载这些图像。我已经查看了其他问题，例如Javascript 文件在 github 页面上不起作用，但这仅适用于来自 HTTPS 的请求。谁能帮我？

// JavaScript Document
document.addEventListener("DOMContentLoaded", function() {
  var lazyImages = [].slice.call(document.querySelectorAll("img.Images"));

  if ("IntersectionObserver" in window) {
    let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
      entries.forEach(function(entry) {
        if (entry.isIntersecting) {
          let lazyImage = entry.target;
          lazyImage.src = lazyImage.dataset.src;
          lazyImage.srcset = lazyImage.dataset.srcset;
          lazyImage.classList.remove("Images");
          lazyImageObserver.unobserve(lazyImage);
		  lazyImage.classList.add("LazyImages");
        }
      });
    });

    lazyImages.forEach(function(lazyImage) {
      lazyImageObserver.observe(lazyImage);
    });
  } else {
    // Possibly fall back to a more compatible method here
  }
});
.Images {
	width: 280px;
	height: 280px;
	padding: 10px;
	object-fit: cover;
}
.LazyImages {
	width: 280px;
	height: 280px;
	padding: 10px;
	object-fit: cover;
}
    <img class="Images" src="Images/Compressed Images/Insta Photo-90.JPG" data-src="Images/With Out Logo/Insta Photo-90.JPG" data-srcset="Images/Compressed Images/Insta Photo-90.JPG, Images/With Out Logo/Insta Photo-90.JPG" alt=""/>
		<img class="Images" src="Images/Compressed Images/Insta Photo-89.JPG" data-src="Images/With Out Logo/Insta Photo-89.JPG" data-srcset="Images/Compressed Images/Insta Photo-89.JPG, Images/With Out Logo/Insta Photo-89.JPG" alt=""/>
		<img class="Images" src="Images/Compressed Images/Insta Photo-88.JPG" data-src="Images/With Out Logo/Insta Photo-88.JPG" data-srcset="Images/Compressed Images/Insta Photo-88.JPG, Images/With Out Logo/Insta Photo-88.JPG" alt=""/>
		<img class="Images" src="Images/Compressed Images/Insta Photo-87.JPG" data-src="Images/With Out Logo/Insta Photo-87.JPG" data-srcset="Images/Compressed Images/Insta Photo-87.JPG, Images/With Out Logo/Insta Photo-87.JPG" alt=""/>
		<img class="Images" src="Images/Compressed Images/Insta Photo-86.JPG" data-src="Images/With Out Logo/Insta Photo-86.JPG" data-srcset="Images/Compressed Images/Insta Photo-86.JPG, Images/With Out Logo/Insta Photo-86.JPG" alt=""/>

4

0 回答 0