Simply put, you have to disable lazy loading. Photonic’s layouts are optimized for loading, and any external lazy loading functionality interferes with it.
When I deactivate lazyload, over 30mb are loaded from the page. With layzyload only 4-5mb.
What do you mean that Photonics Layout is optimised? I deactivated Lazyload and now all the images are loaded immediately, it’s too much and too slow 🙁
- This reply was modified 7 hours, 52 minutes ago by .
The net volume of data loaded by your page will still be 30MB, if you are trying to load all photos. This is true both, with lazy loading and without lazy loading. Lazy loading is just a browser feature that prevents photos from being fetched until they scroll into view.
If you are concerned about the volume of data downloaded, you might want to use the “Tile Size” setting when you are building your gallery – you can pick a smaller size for this, which will significantly reduce the total volume of downloaded data.
If you wish to really use lazy loading, then you might want to consider a different layout. It is not possible to use lazy loading with a dynamic layout such as Mosaic – the mosaic layout requires to first download all photos to determine their sizes; without getting their sizes, it cannot construct the layout.
Thank you very much for the quick answer. I have re-enabled lazyload and if you look at the site with Safari, Chrome or Edge you will see that it works very well. Unfortunately, it doesn’t work in Firefox. My concern is that the first images should be displayed quickly. It is clear to me that you have to wait for the other images when scrolling.
- This reply was modified 7 hours, 18 minutes ago by .
I fixed the problem by hard-coding in the naturalWidth and naturalHeight details, which were not readable under Firefox with Lazyplugin. Perhaps this fix can be adopted? The other views also work well together with Lazyload without adaptation.
- This reply was modified 48 minutes ago by .
Interesting… where did you hardcode this?
Sorry for this stupid hack, but it works well. I changed some lines in the mosaic function.
var width = image.naturalWidth;
width = 284;
var height = image.naturalHeight;
height = 150;
if (!(height === 0 || height === undefined || width === undefined)) {
var aspectRatio = width / height;
photos.push({
src: image.src,
width: width,
height: height,
aspect_ratio: aspectRatio,
photo_position: position
});
}
I use the lazyloader from the “W3 Total Cache” plugin.
- This reply was modified 43 minutes ago by .
It would be great if a better solution than mine could be included in this great plugin 🙂
I think what you are getting here is a conflict between FF and the lazy loading plugin.
Basically, if you look at the code you edited, it was within a call to waitForImages, which essentially waits for the full image to be downloaded. At that point, naturalHeight and naturalWidth should already be available, because this is literally executed after the browser has the photo’s information. So, the code you put in place should not be required. What might be happening is that your Lazy Loading plugin is replacing the Photonic photos with a dummy image (with incorrect / placeholder dimensions), which is confusing Firefox when it tries to calculate the aspect ratio.
Now, if you look at your gallery markup, each img tag already has the width and height attributes defined, and with the correct dimensions. Firefox could have potentially used these (I think the other browsers are using these).
I will see if I can modify this behaviour, but this will need extensive testing. More so, since each lazy load plugin operates differently.