0

I've made an image gallery, but the browser lags as it renders images. Six images are rendered at one time, but because these images are full-size jpegs taken straight from people's phones or cameras they are often large and it causes a lot of lag. I'd like to save the images to the server in their full size to reduce any loss of quality, however this is obviously not ideal when rendering small previews (only about 330px wide).

What I therefore would like to do (unless there's a much better way of approaching this; perhaps something server-side with PHP?) is reduce the image sizes to a few hundred KB rather than a few thousand on the client just before they are actually loaded onto the page.

I hope that makes sense, and I hope I'm not being really stupid and missing something really obvious, which is what it feels like. Help is always appriciated.

LearningProcess
  • 607
  • 1
  • 8
  • 29
Jake Stanger
  • 449
  • 1
  • 8
  • 24
  • 1
    I suppose there must be some source to upload those images...Why don't you optimize and re-size those images as per the requirement of the front end! – Rayon Nov 04 '15 at 19:42
  • I'm afraid I'm not entirely sure what you mean. The images are uploaded through a form and saved using PHP. Are you suggesting I change them at this stage? If that is the case, I'd ideally like to keep them at max size on the server for downloading and don't really have the space to make a 2nd copy. – Jake Stanger Nov 04 '15 at 19:46
  • You say you don't really have space to make a second copy, but consider that the "copy" will be at a very reduced size, probably under 25% of the original size. It also means that you'll save on bandwidth in serving the images as well. – Mr. Llama Nov 04 '15 at 20:02
  • That's true actually. In that case I will make a second copy of the image reduced to 'thumnail size' PHP-side. I'm tired, can you tell? :P. – Jake Stanger Nov 04 '15 at 20:06

1 Answers1

2

I advice you tu use Echo.js , to avoid all image loading issues

Lazy-loading works by only loading the assets needed when the elements ‘would’ be in view, which it’ll get from the server for you upon request, which is automated by simply changing the image src attribute. This is also an asynchronous process which also benefits us.

Here is a DEMO using Echo.js which load the image only when it show up on the view port !

echo.init( {
            offset: 10,
            throttle: 550
        } );
ZEE
  • 5,669
  • 4
  • 35
  • 53
  • That looks very useful and easy to use. I'll try it now and see if it does what I want. – Jake Stanger Nov 04 '15 at 19:49
  • I'll provide an example in JS fiddle now :) – ZEE Nov 04 '15 at 19:51
  • Ok thanks for pointing the script out, and I may still use it because it could come in handy, but because this is an image gallery all of the images are in the same area so will enter the view port together. I wasn't 100% sure this was what you meant, but your JSFiddle made it clear. – Jake Stanger Nov 04 '15 at 20:09
  • you still can use it in the case of an image gallery or you have other alternatives such as http://dinbror.dk/blazy/ – ZEE Nov 04 '15 at 20:23
  • Multi-serving, that sounds useful. I'll probably implement that, thanks. – Jake Stanger Nov 04 '15 at 20:43