Menu
The structure of my webpage is:
<html>
<body>
<div id="1">
<img>.....<img>
</div>
<div id="2">
<img>.....<img>
</div>
<div id="3">
<img>.....<img>
</div>
<div id="4">
<img>.....<img>
</div>
</body>
</html>
All these divs are hidden in the beginning and based on navigation, these divs are shown one by one. There is a menu div which will control the hiding and displaying of other divs.
When I uploaded the files on the server, I realized that in order for the website to load, all the images must load and the total image size is around 10MB. Hence the website load takes a lot of time. Is there an alternate way/hack to make webpage load faster?
Putting these images in different pages is not an alternate approach. I intend to make the website work using jQuery and CSS transitions. Please suggest a way in which I can make the webpage load faster.
What approach do I use? One approach is to display a Loading gif until the website loads. What are the other alternatives?
734
Since you're using jQuery, I would recommend using lazyload. It causes the images to get loaded only when in viewport.
113
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
