I have an element with overflow:auto set to it and lots of images inside it, in a list manner (one after the other) and I would like to apply lazyloading to it.

Bonjour,

Je suis développeur au Monde Intéractif, comme vous le savez nous utilisons votre lazyload sur notre site mobile (http://mobile.lemonde.fr), qui est d'ailleurs très performant.

J'ai donc forké votre projet et j'y ai ajouté le support des écrans HD retina (https://github.com/neoziro/lazy-retina). Je reviens vers vous car le code peut vous intéresser et vous pourriez avoir envie de l'intégrer à votre script.

Nous prévoyons très prochainement de déployer lazy-retina aussi sur la version desktop du site afin de supporter le nouvel iPad et le Macbook Pro Retina, et probablement d'autres devices prochainement.

Hi vvo ;)

I'm surprised by the minification, which doesn't seem to be optimal.

The built file is 4575 bytes, but I can get it to 3943 bytes by minifying it with another tool. Could it be a problem with the uglifyify params?

(By the way, be careful with the screw-ie8 option!)

Certaines images, non visibles à l'écran, restent dans l'état "en cours de chargement" (c'est à dire que l'attribut src n'est pas remplacé par la valeur réelle de l'image) alors que ces images sont accessibles de façon "classique"

Contexte : Quelque soit le navigateur utilisé (à l'exception d'ie car sous mac os x). Ces images sont contenues dans une popup utilisant Fancybox 2 (en mode html pas iframe ou autre).

Ps : Merci pour ce petit framework bien pratique :)

Hi @vvo,

On ipad, we can see a bad lazy loading because it seems that until the pressure on the screen is not release (during the scrolling), no images is shown.

To reproduce the behavior, you need to go to your demo site on an ipad (safari or chrome) and scroll slowly and look at what happens when you release the pressure.

I try to understand what's going on but that's not obvious. The infos I have for the moment :+1: http://stackoverflow.com/questions/20318002/animate-on-scroll-in-mobile-safari http://stackoverflow.com/questions/10482227/javascript-dom-changes-in-touchmove-delayed-until-scroll-ends-on-mobile-safari/10856671#10856671 http://api.jquerymobile.com/scrollstart/

I have a small bug detected in responsive case. Here is the example:

a 1400x400px banner, centered on the browser.

On mobile (let's say width = 500px), the top-left pixel position is top: 0, left: (500 - 1400)/2 = -450px As 450 > the base offset, the image is considered as not inViewport, but as the image width is 1400, it should be considered "in".

Thank you

Hi @vvo,

We saw today that the lazyload doesn't work on chrome 31. We see the problem on mac and linux. It's working fine on firefox.

If you go on the demo page http://vvo.github.io/lazyload/, you will see that all the images are loaded at the beginning.

I want to lazyload in a scrollable div container that is quite long. So i made a <script> at the end of the div to declare my own instance of lazyload attached to this container.

Problem: Chrome (and Safari) will sometime launch the "onload" event of my images before the div is closed.

Here is a fiddle : http://jsfiddle.net/GJ8Cb/2/ (on Chrome and Safari, but does not reproduce every time)

I've got a popup which containing a list of pictures. This popup is in absolute positionning with an overflow:hidden. The pictures in the viewport are instantly loaded but not the outside ones. When i scroll in the popup hidden pictures are not loaded. When i scroll the page under the popup, they suddenly load. Is there a way to attach an event when i scroll the popup to fire lzld()?

Closure compiler complains a little during the build.

WARNING - If this if/for/while really shouldn't have a body, use {}

This empty loop is the reason:

for (var i = this.length; i-- && this[i] !== value;) {}

But it works!

Hi,

i'm an happy user of https://github.com/fasterize/lazyload, but i want more (iframe lazy loading) What old browser are you supporting? (it would be great to state it in readme)(I only need IE8+)

I'm requesting again and again to update the readme with my website Better Gift Flowers but you're deleting it. I would like to know whats the problem?

With increasing popularity of webp images, its essential to have support for lazyloading these images. But because webp image format is not supported by all browsers, it is essential to add fallback support to jpeg/png versions in lazyloading itself.

Hi,

I'm trying to switch to webpack a big project using lazyload but as the script needs to be loaded on the top on the page, I do not manage to make it work.

The config looks like this:

module.exports = {
  entry: {
    head: [
      './custom-lazyload.js', // which does `import lazyload from 'lazyloadjs'`
    ],
    global: [
      // some files
    ]
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
    })
  ]
}

I got tree generated files: head.js, global.js and vendor.js but the webpack "bootstrap" is in the vendor and the vendor is huge, I do not want to load it on the top of the page.

The head.js start like this: webpackJsonp([16],{ and so the webpackJsonp function does not exists.

Do you have by any change a working example with webpack ? or an idea on how to make it work ?

Thank you

Thank you for this great script.

I look forward to the possibility of lazy loading on div background . I could carry on my side by adding an image below <img> that has the role of background . But the code is not very beautiful.

I just used your script on embed tags for flash files . This works but you have to know two things : onload does not work on embed tag and Chrome does not support the change src ( you have to refresh the parent content)

I achieved this by adding an ID to the embed and via the function:

function lzldEmbed(e) { e = document.getElementById(e); var s = setInterval(function(){ if (e.src!='') { var c = e.parentElement; c.innerHTML = c.innerHTML; clearInterval(s); } },100); lzld(e); }