在laravel应用程序中使用tuupola/lazyload时出现错误

Question

在Laravel 7/ blade / bootstrap 4.1.2 / jquery 3.3.1中，我想使用https://github.com/tuupola/lazyload对我的映像应用延迟加载

我选择了4个大文件(3个png，1个jpg 3-10 MiB)并在刀片模板中显示它们：

<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 init上：

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

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

结果，我的JS控制台中出现了一个错误

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

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

如果向下滚动浏览器，我会在浏览器的控制台中再出现一个错误。如何修复它？

谢谢!

Answer 1

如果你想试试这个。

在您的html文件中

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

在js文件或内部函数(“DOMContentLoaded”，document.addEventListener(){ 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