benjamincharity / angular-flickity

👆 An AngularJS wrapper for Flickity (Touch, responsive, flickable carousels)
Other
33 stars 22 forks source link

background lazy load not working in angular js #74

Open MukulSinghKumawat opened 7 years ago

MukulSinghKumawat commented 7 years ago

bglazyload not working in angular

benjamincharity commented 7 years ago

I have personally been unable to get the lazy loading to work within Flickity in any situation; even in the CodePens linked from the Flickity.js docs.

As far as this libraries integration with Flickity goes, it is simply passing an option to the Flickity library.

If someone can provide a working example of lazy loading actually working I can try to track down the issue. I will leave this open since it is a valid issue.

luigimannoni commented 7 years ago

We had lots of issues with preloading and also lazyloading as well especially if we used a remote server or slow loading images. At the end we did ourselves a preload of the images in an old fashioned way:

export default function preloadImages(urls) {
  // see carousel controller for more info on this method
  const promises = urls.map(url => {
    return new Promise(function (resolve, reject) {
      const img = new Image();
      img.onload = () => resolve(img);
      img.onerror = () => resolve(img);
      img.src = url;
    });
  });

  return Promise.all(promises);
}

Hope it helps

benjamincharity commented 7 years ago

Thanks for the tip @luigimannoni! Hopefully it can help someone until this is resolve. Even in the official Flickity codepen demos I couldn't seem to get the lazyloading to work 😞