laravel 应用中的 tuupola/lazyload 有错误

Question

在Laravel 7/blade/bootstrap4.1.2/jquery3.3.1 我想为我的图像应用 lazyload https://github.com/tuupola/lazyload

我选择了 4 个大文件（3 个 png，1 个 jpg 3-10 MiB）并在 blade 模板中显示它们：

<div class="row">
    @foreach($bigImages as $nextBigImage)
        <div class="col-12 m-2 p-2 lazy_image">
            <img src="/images/big/{{ $nextBigImage }}" title= "{{ $nextBigImage }}" style="width: 100% !important;">
        </div>
    @endforeach
</div>

在 js 初始化上：

let images = document.querySelectorAll(".lazy_image");
console.log('images::')
console.log(images)

new LazyLoad(images, {
    root: null,
    rootMargin: "0px",
    threshold: 0
});

因此我的 JS-console

有一个错误

http://local-votes.com/null 404 (Not Found)

其中 http://local-votes.com 是我的本地主机我在控制台中看到：https://imgur.com/a/uFZLtLr

如果向下滚动浏览器，我在浏览器的控制台中还有 1 个错误。如何解决？

谢谢！

Answer 1

如果你想试试这个。

在您的 html 文件中

<img src="defaul.jpg" data-src="main.jpg" alt="img" class="lazy">

在您的 js 文件或内部 document.addEventListener("DOMContentLoaded", 函数() { var lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));

  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.classList.remove("lazy");
          lazyImageObserver.unobserve(lazyImage);
        }
      });
    });

    lazyImages.forEach(function(lazyImage) {
      lazyImageObserver.observe(lazyImage);
    });
  } else {
    // Possibly fall back to a more compatible method here
  }
});

我推荐你去看看 https://developers.google.com/web/fundamentals/performance/lazy-loading-guidance/images-and-video

laravel 应用中的 tuupola/lazyload 有错误

have error with tuupola/lazyload in laravel app

laravel

jquery-lazyload