miromannino / Justified-Gallery

Javascript library to help creating high quality justified galleries of images. Used by thousands of websites as well as the photography community 500px.
http://miromannino.github.io/Justified-Gallery/
MIT License
1.68k stars 299 forks source link

Minimize http requests #271

Open Offerel opened 6 years ago

Offerel commented 6 years ago

Is there some way to minimize the count of the initial http request per gallery? I have thought, that i could use [be]Lazy.js to lazy-load the images, but this seems do not work. The problem in my case is, that the thumbnail is not really a ready made *.jpg file. Instead of this, i use a php script. this checks, if the thumbnail exists, if yes, it delivers the existing thumbnail really fast, if not, it generates the thumbnail and delivers it afterwards (saving the newly build thumbnail for later calls). Additionally, the script mus make some calls to a SQL database. If i now have a very huge gallery where all thumbnails must be build new, i reach the max_connections setting of the SQL server and the following requests timeout. Additionally, writing the thumbnails to disk are relative slow on the server because of a very poor I/O handling time.

So the idea was, to minimize the initial http request's a little bit and load only the visible thumbnails first and later all the following files, if needed. Is there anything i could do to automatically lazy-load them, as the thumbnails comes in the browsers viewport or must i build some paging mechanism?

BTW: in the meantime, i have released my plugin. You can find it at https://github.com/Offerel/roundcube_pictures. Currently only roundcube larry skin is supported, since this plugin must only work in my personal environment. If the user's want to use other roundcube skins, they can contribute to the plugin and make pull request.

miromannino commented 6 years ago

I would exclude using Lazy.js since JG should solve this problem on his own.

Have you tried to:

Offerel commented 6 years ago

Thx for your suggestion. I have tried your second suggestion, but this didn't solve the problem with to many http requests. The current server is only a small Raspberry Pi. I don't know if you know this device, but it has only as small ARMv7 processor and 1GB RAM. I didn't have tweaked it, so that it can work with more request, maybe, i do this later.

Using data-safe-src can be conflict with lightGallery, but im not sure. I will try this approach. Specifying width and height of the thumbnails is indeed a problem with the current implementation. I can't be what i really get. The thumbnails are generated dynamically by a second php file. I can read the size, if the thumbnail is existing, but in some cases, the thumbnail will be created by a separate php file. This separate php file has no callback function for reporting width/height of a generated thumbnail. But I will try to implement such a feature. I hope that this does not open other performance problems.