DallasMorningNews / photoTemplate

0 stars 0 forks source link

Lazy load images #1

Open hobbes7878 opened 9 years ago

hobbes7878 commented 9 years ago

I think we should go ahead and build this into the template before I build the app. I'm worried we'll need to customize the app design to what we need to run the ajax calls.

There are plugins it looks like we could use, or can write the ajax ourselves.

On the app side, if it helps, we can use predictable naming conventions, like name the images sequentially 'image-1.jpg', 'image-2.jpg', etc. Better if we don't, but I don't so much mind a predictable hack...

johndhancock commented 9 years ago

We could serve up the image paths as a data-attribute on each image tag, leaving the src empty. I think we should lazy load the next image in the slideshow each time an image is viewed. That way, the next image is available when the slideshow is progressed, rather than waiting to load it until that image is viewed.

For instance: Viewing image 1, image 2 is lazyloaded. Advance slideshow to image 2, image 3 is lazyloaded. Advance slideshow to image 3, image 4 is lazyloaded.

This should prevent a delay and empty image while the image loads is the file size is large and the connection not optimum.

hobbes7878 commented 9 years ago

I like that.