4

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?

karel
  • 5,489
  • 46
  • 45
  • 50
Farveaz
  • 583
  • 2
  • 6
  • 14
  • Start load images with reduced quality, when page are loaded, start loading images with high quality. – Anton Nov 30 '14 at 13:34

6 Answers6

4

Since you're using jQuery, I would recommend using lazyload. It causes the images to get loaded only when in viewport.

Sander
  • 548
  • 5
  • 15
3

You should always use small sized images in order to load your web faster. You could try https://tinypng.com/ (or https://tinyjpg.com/) to reduce the size of your images without them losing their quality hence making the load take less time.

James Ele
  • 111
  • 3
  • 13
  • This answer was useful but my client had giant images so it did not solve my issue directly. I found this sit that let me upload any sized png image https://compresspng.com/ – Frederick Haug Mar 06 '22 at 21:20
2

It is possible to compress an image. Images take the most data sometimes even MBs. To compress an image open it in preview (for example) on a Mac. Then go and adjust the width and height of the image. I'm not sure about the current width and height of your images though so if you can would you post that? Also see if you can get the page under 1mb you could accomplish that by compressing files (getting rid of white space) and compressing images. Also try loading some of the unimportant content with ajax after the rest of the page (with more important content) has loaded.

www139
  • 4,960
  • 3
  • 31
  • 56
  • Approximately the images are around 667x307 pixels. But then, compressing it would reduce quality, yes? This is a image gallery portfolio. Reducing image quality is not a good option! – Farveaz Nov 30 '14 at 15:02
  • True, but the quality loss would be better than taking forever to load. Imagine on a phone - 10mbs! What are you using the images for? – www139 Nov 30 '14 at 15:27
  • It is the portfolio of a photographer! I've tried reducing the quality of images and used compressed png. It came down from 10 mb to 3 mb, but still, It is not functioning at the speed I want it to. – Farveaz Dec 02 '14 at 14:51
  • Hmmmmm? That usually helps me. Still 3mb is much data. See if you can bring it down more. – www139 Dec 02 '14 at 15:08
0

10mb is very large size for single webpage... I strongly recommend you to redesign your page into multiple...

If you want to stick to your current structure, then use ajax... it wont speed up the page load... but it makes you to feel like page loaded with speed...

In your ajax, simply request for 2 or 3 images at a time.. and when the image is fully loaded, then only show the image...

EDIT:try anton comment it is also good idea along with ajax.. Here is your starting point https://developers.google.com/speed/pagespeed/module/filter-image-optimize

vinrav
  • 371
  • 3
  • 12
0

First of all, 10 MB is way too much data for a single website (even if you meant Mb that would be quite a lot). A first step would be too optimise your images for the web. A great tool that I have used in the past is Yahoo!'s Smush.it.

After you've done that, you'll have to consider how you can restructure your HTML in such a way that only the first (few) image(s) are loaded so that they can be loaded more quickly (saving bandwidth by loading as few images as possible at a time).

I suggest that you first only load the image that is visible when a user opens the page. Then run a script to append the other images. You want to run that script after your first image has been loaded, you can use window.load for that.

Your html would then look like this:

<body>
  <div id="1">
    <img src="first-image.jpg" alt="First image">
  </div>
  <div id="2">
  </div>
  <div id="3">
  </div>
  ...
</body>

And a jQuery file with something like this:

$(window).load(function () {
    $("#2").append('<img src="second-image.jpg" alt="Second image">');
    $("#3").append('<img src="third-image.jpg" alt="Third image">');
    // and so on
});
Community
  • 1
  • 1
Bram Vanroy
  • 27,032
  • 24
  • 137
  • 239
  • Will it work when I use, an id of an image after it loads? like $('#imageID).load(function(){ //load images }); – Farveaz Nov 30 '14 at 15:07
  • @Farveaz Yes, that ought to work, though possibly not cross-browser/with cached images. Take a look at [the docs](http://api.jquery.com/load-event/) for more info. – Bram Vanroy Nov 30 '14 at 15:43
0

Am assuming that by 10 MB you mean the total size of all images and you have several images. I would also assume that this is your use-case (you might be purposefully showing high-res photos).

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

If you have a fixed number of such images as shown in the question, then one method you could apply is to load each image as and when required. i.e. as per your menu option when a div is shown, at that time load the image. This way the first image will be loaded along with the page load, and the rest will be loaded on demand. You may show a "loading" indicator during that time. Also, note that you will need to load-on-demand only once for each image, which will then be cached for re-use.

Here is a very simple and crude example:

Demo Fiddle: http://jsfiddle.net/abhitalks/rmx4so40/1/

You maintain an array holding all your image urls and cached state. Inititally, the cached state will be false for all images. We will then turn it on for every image we show. (At this point we are assuming that the images will be cached, there are scenarios where images may not be cached).

Next, wire up a load event handler for images and put in your code to systemically show the current images and hide other, if required.

On your menu click, check the array if cached flag is on. If not, let the load event handler take care. If yes, show the image right away.

Sample Snippet:

var images = [{'url': 'http://lorempixel.com/320/320', 'isCached': false }, 
              {'url': 'http://lorempixel.com/321/321', 'isCached': false }, 
              {'url': 'http://lorempixel.com/322/322', 'isCached': false }, 
              {'url': 'http://lorempixel.com/323/323', 'isCached': false } 
              ],
    idx = 0, len = images.length;

displayImage(0); // intitially display first image on page load right away
$("#nxt").on("click", function() {
    idx = (++idx % len); displayImage(idx);    
});
$("#prv").on("click", function() {
    idx = (idx + len - 1) % len; displayImage(idx);    
});
$("img").on("load", function() { showImage($(this)); }); // handle load event on image

function displayImage(idx) {
    var $currentImage = $("#d" + (idx + 1)).find("img");
    $currentImage.attr('src', images[idx].url); // set the src from current array index
    if (images[idx].isCached) { showImage($currentImage); } // if cached, show
    else { images[idx].isCached = true; } // if not cached, let load handler work
}

function showImage($img) {
    $("img").removeClass("show"); $img.addClass("show"); // your routine here
}
div {  float: left; }
img {
    width: 0; opacity: 0;
    transition: width 100ms, opacity 1s 250ms;
}
img.show { width: auto; opacity: 1; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="prv">&lt; Previous</button><button id="nxt">Next &gt;</button>
<hr />
<div id="d1"><img /></div>
<div id="d2"><img /></div>
<div id="d3"><img /></div>
<div id="d4"><img /></div>
Abhitalks
  • 27,721
  • 5
  • 58
  • 81