0

This topic has been discussed before, however I was unable to find anything applicable.

I have a large number of datasets (numbering in the thousands), which I'd like to display and then run through a JS pagination.

That obviously requires me to fetch all the results, which just takes a few milliseconds and is barely noticeable.

However upon constructing the actual page, the images, which are largely recurring, lead to a page loading time of 10 seconds+, which is decidedly too long.

My question is fairly simple: Is there some way to tell the browser to download each picture just once and reuse that instead of apparently downloading the same pictures over and over again?

Or do you know any other tricks to speed up page loading for many datasets with recurring pictures?

I'd like to avoid having to do the pagination via AJAX if possible.

My table structure looks like this:

<table>
    <tr>
        <td>Number</td>
        <td>Image</td>
        <td>Image</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Image</td>
        <td>Text</td>
        <td>Image</td>
        <td>Image</td>
    </tr>
</table>

The last image is the same for all rows, for images one and two it's always one of two different images, four is one of 13 different images.

I hope you can help me out a little.

Edit: Thanks to the previous replies, I managed to get rid of the image loading times, which is per definition great, however it didn't really reduce my loading times all that much.

Firebug tells me, that it wastes most of the time on Waiting, which gives me an entirely new angle on the problem I can explore.

Thanks for helping out so far, if I get stuck again, I'll open a new question. :)

On a final note, it appears the problem wasn't the server/client transfer connection, but much rather my Firefox is having issues rendering the large block. So yeah...guess I'm out of luck.

Refugnic Eternium
  • 4,089
  • 1
  • 15
  • 24
  • 5
    The browser doesn't download the same image twice in a page unless you messed the server settings (check in the headers that the image is cachable, look at the network panel of your browser's dev env) or give the images different URLs – Denys Séguret Jul 24 '15 at 10:29
  • Are the images thumbnails? And are the images optimized for web (i.e. filesize minimized) ? – David Fariña Jul 24 '15 at 10:33
  • How are you loading the page? Do you use `flush()`? – Alvaro Montoro Jul 24 '15 at 10:54
  • @DenysSéguret The server is a standard apache2 on a linux machine. I haven't messed around with the configuration at all, aside from configuring the page itself. However I will look again. However how will the images having different URLs help me load them faster? – Refugnic Eternium Jul 24 '15 at 11:43
  • @DavidFariña No, they are orignal sized, specifically designed for that application with a whopping 20x20 pixels per picture. – Refugnic Eternium Jul 24 '15 at 11:44
  • @RefugnicEternium When there are thousands of those it still sums up. Before doing anything with coding or caching i would minimize those images in filesize. May I ask why do you need a lot of 20x20 px images?? – David Fariña Jul 24 '15 at 13:04
  • @DavidFariña They are recurring, as in: It's the same pictures over and over again. But don't worry about it, I've figured out that it wasn't my page causing the problem, but much rather my browser having difficulties rendering all of it. – Refugnic Eternium Jul 27 '15 at 06:13

2 Answers2

2

If you have proper caching set on the server, then the browser wont download the same image even if its been used multiple times in the page.

If your web server is apache based, head over here to configure your apache config or .htaccess so that it sets an expiry for the images. https://stackoverflow.com/a/447039/1716437

Community
  • 1
  • 1
Ammadu
  • 1,675
  • 15
  • 17
1

Couple of options you have:

  • Use a lazy loader so it only loads the image as you get to it (should drastically speed everything up
  • Use PHP to paginate and use AJAX for the requests (i know you want to avoid it, but putting it here in-case anyone else has the issue further down the line)
  • Or just generally use PHP to paginate without AJAX
Gaza
  • 427
  • 2
  • 4
  • 17