当前位置: 动力学知识库 > 问答 > 编程问答 >

javascript - Get Masonry To Layout Images Correctly Before Load

问题描述:

I am using Masonry to lay out a set of images. The images could be any aspect ratio (I cannot limit the aspect ratios to a predefined list). I'm using percentage column widths and the images are responsive (I'm using Picturefill). I use imagesLoaded to monitor image load and tell Masonry to re-layout the images as needed.

This all works fine, but there is a gap between page load and all the visible images loading which means someone viewing the site can see them jump or animate to their final position. Before all the images are loaded, Masonry cannot accurately lay them out as it doesn't know the heights of the images. I could hide images that are visible until they have been loaded and laid out.

However it seems to me I should be able to do better as I have the image dimensions available to me on the server. If the images were not responsive I could just set the img width and height attributes.

Is there any way I can use this information to allow Masonry to layout the images before they are loaded, given that the images must have percentage widths.

Note: Each element in the grid is actually a li that wraps an a that wraps the img.

分享给朋友:
您可能感兴趣的文章:
随机阅读: