javascript - How to optimize seamless image grid? CSS or Jquery? Image optimization? -

i'm simple ux designer beefing code skills, please forgive ignorance , crappy code.

i'm rebooting portfolio website. original seamless grid built using masonry jquery plugin. it's sluggish though. http://jack-a-lope.net/illustration.html

i decided rebuild using masonry worried performance might still bad, found css solution, hope loads faster. https://css-tricks.com/seamless-responsive-photo-grid/

i asked on website , told issue not plugin slow preloading 3mb of images. i've resized images, , optimized them best of ability, cutting out pretty significant chunk of memory, , yet it's still loading slow. doing wrong? why larger websites can load many images, code choking up? there other things need optimize this? matter of sticking loading screen on page or what?

[edit:] images compressed , optimized. images load decently fast, problem fouc while js takes time reformat images etc.

you preloading 3mb of images because that's sum of images weight, that's not problem, it's normal behavior.

you can see improvements using image compression tool, if think page increase number of images, should consider lazy load infinite scroll, i've used this jquery plugin, , works great static pages.

edit:

if not going have many images, can use lazy load , fade in image once loaded. 2 of favorites jquery plugins are:

• lazy load (the used)
• unveil (minimal , fast)