search

germanysbestkeptsecret / Wookmark-jQuery

A jQuery plugin to create a dynamic, multi-column layout.
MIT License
2.64k stars 759 forks source link

Show white boxes first, then fade in images by lazy loading #208

Closed kunalnagar closed 8 years ago

kunalnagar commented 8 years ago

I am trying to replicate this demo here: http://www.wookmark.com/recent

I am unable to get the white squares to position perfectly in wookmark layout and then load the images. Can some one help?

Sebobo commented 8 years ago

Maybe @GBKS can answer that.

kunalnagar commented 8 years ago

Checking in to see if there is any update on this? @GBKS @Sebobo

Thanks!

GBKS commented 8 years ago

Is there any code you can post? One of the most common issues that come up is that the tags are missing "width" and "height" attributes. Only when those are set can the browser calculate the correct size of the images before the images are actually loaded. Could that be the case for you?

kunalnagar commented 8 years ago

I think so. In the example, I analysed the server request and noticed that you are actually sending the HTML from the server itself – which is not the case with me. We are just getting JSON data with links to the images and calculating the image width and height of each image on the fly would increase the load time dramatically.

Even if I do set a constant image height and width by creating the <img> tag dynamically and appending to the DOM, I need to update the layout on every append. Plus, I'm also using the opacity feature so that the images fade in.

Hope this helps. Let me know if you need any more info!

GBKS commented 8 years ago

Correct, Wookmark has the image width and height in the database and spits out HTML with the right settings. So even if the images never loaded, the layout would still be correct.

If you don't know the size of the images until they are loaded, you'll have to decide what you want to do. It's simply not possible to calculate the full layout until you have loaded all images. So either you load each image off-screen and then put them in the layout once loaded, or you wait until all are loaded and then show them all at once.

One simple way could be to load the next batch of images before the user has even scrolled all the way to the bottom. That gives you more time to load the data and the images, and people will not really see this load effect, since by the time they have scrolled down, the next batch of images is already loaded and placed in the layout.

Once thing to try could be the approach here: http://stackoverflow.com/questions/6575159/get-image-dimensions-with-javascript-before-image-has-fully-loaded

Does that help?