have error with tuupola/lazyload in laravel app

Question

In Laravel 7 / blade / bootstrap 4.1.2 / jquery 3.3.1 I want to apply lazyload for my images with https://github.com/tuupola/lazyload

I selected 4 big files(3 png, 1 jpg 3-10 MiB) and show them in blade template :

<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>

and on js init :

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

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

As a result I have an error in my JS-console

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

where http://local-votes.com is my local host I see in the console : https://i.sstatic.net/5Moy7.jpg

If to scroll browser down I have 1 more error in browser's console. How to fix it ?

Thanks!

Just guessing here, but aren't you suppose to query the image files instead of the wrapping div? — thefallen
– thefallen, Commented May 12, 2020 at 7:18
Thanks! That is what I missed. But even setting lazy_image to image I do not see any lazyload effect. In the docs I do not see have it any delay seconds parameter ? — mstdmstd
– mstdmstd, Commented May 12, 2020 at 7:43

Sidik · Accepted Answer · 2020-05-12 07:58:33Z

1

If you want try this.

in your html file

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

on your js file or internal document.addEventListener("DOMContentLoaded", function() { 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
  }
});

i recomend you to visit https://developers.google.com/web/fundamentals/performance/lazy-loading-guidance/images-and-video

answered May 12, 2020 at 7:58

Sidik

13812 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

mstdmstd Over a year ago

I inserted your code and the same : image is visible and in console I see images array output - but no any lazy effect. Are there some delay/fade effects to see these effects more visible ?

Sidik Over a year ago

did you read this developers.google.com/web/fundamentals/performance/….

Sidik Over a year ago

in example, lazy means fisrt you load image from 'src' and when image on viewport it will be loaded the 'data-src' attribute on img tag

Sidik Over a year ago

so you need default image that asign to 'src' attribute and the main image in 'data-src'. Logicaly , first you load img on 'src' with image file 1 kb it will fastes than you load real/main image ex. 500 kb/more. If you want another logic , sorry Idk.

Sidik Over a year ago

last note , it help if you have multyple image loade in different viewport(i men you need to scroll(up/down/up/left/right)) web page

|

Collectives™ on Stack Overflow

have error with tuupola/lazyload in laravel app

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related