CODEWITHSUNDEEP
javascriptjquerycsshtml
Farveaz
Farveaz

Reputation: 608

Making images load faster HTML

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?

Upvotes: 4

Views: 30147

Answers (7)

Seewhy17
Seewhy17

Reputation: 59

This is probably too late but a service like cloudinary will help a lot with optimizing images on the fly

Upvotes: 0

James Ele
James Ele

Reputation: 121

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.

Upvotes: 3

www139
www139

Reputation: 5227

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.

Upvotes: 2

Abhitalks
Abhitalks

Reputation: 28387

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>

Upvotes: 1

Bram Vanroy
Bram Vanroy

Reputation: 28437

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
});

Upvotes: 0

Sander
Sander

Reputation: 558

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

Upvotes: 4

vinrav
vinrav

Reputation: 370

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

Upvotes: 0

Related Questions