Because Lazyload creates a blank image and stores it in the cache folder, when loading an image, 2 http request are sent out for 1 image. 1 to the blank png, the other to the actual image.
Granted the files are quite small like just about 100 bytes but it adds unneeded http requests to a template that’s already making alot of http requests due to multiple css & js files. On a page that loads say 30 articles per page, that’s 60 http requests instead of 30 http requests to the intro images. It’s quite alot of strain on the browser.
If i use a standard lazyload script from say github. The lazyload gif is created by “src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==” which is rendered by the browser thus no http request is made. But the problem with lazyload & masonry is that they don’t work together very well, causing overlapping out of viewport.
So I see the JA Wall team approached this matter differently by generating a blank png with the same dimensions as the actual image. This allows masonry to adjust itself properly when out of viewport. Unfortunately this method adds extra http requests, that might be why some people faced slowness enabling lazyload despite it being supposed to help loading performance.
So my question is, any chance this behavior can be fixed? For example, using getimagesize to get the width and height of the actual image then populating that area with a 1px gif and getting masonry to wait for imageloaded script to return a value before updating the masonry layout?
