3

I'm displaying images like this:

<img src="placeholder.jpg" data-url="/get_image/{{image.id}}/" />

/get_image/{{image.id}} returns some JSON with the URL to the actual image, and then I replace the src attrivute of the <img> tag using jQuery.

The problem I have is that the image is displayed on the browser only when it's been completely downloaded. For large images, this can take a while and some users are thinking that the image is never loading, despite the fact that placeholder.jpg says "Loading..."

It would be great if the image that's replacing the placeholder would actually visibly load (for instance top to bottom like most JPEGs) as opposed to just suddenly displaying when all of it has been downloaded.

A way to show a progress bar would be even better.

Does anybody have suggestoins?

Gabriele Petrioli
  • 191,379
  • 34
  • 261
  • 317
Salvatore Iovene
  • 2,064
  • 1
  • 17
  • 31
  • 1
    http://demo.tutorialzine.com/2013/09/quick-tip-progress-bar/ – Adam Azad Nov 12 '13 at 08:16
  • What you use to get that data? `` Try ajax and use `beforeSend : function(){ $("#yourimage").attr("src","url to your loading image"); }` and on completed `complete : function(data){ $("#yourimage").attr("src","data"); }` – Vinh Nov 12 '13 at 08:20
  • @Vinh that's pretty much what I do already... my placeholder.jpg says "Loading". But nothing moves while the image is loading, and then suddenly it appears. If it's a 5 MB image, it could take tens of seconds on a slow connection, and the user thinks something went wrong. – Salvatore Iovene Nov 12 '13 at 08:23
  • I dont know, may be your loading is `JPG` type not `GIF` type then that why. And if you use ajax, it's no need put data-url in `` tag. The way I use is : `$.ajax({ url: "your url", global: false, type: "POST", data: {}, cache: false, beforeSend: function() { $("#yourimage").attr("src","loading.gif"); //loading.gif for ex }, success: function(data) { $("#yourimage").attr("src","data"); } }` – Vinh Nov 12 '13 at 08:30
  • 1
    Make your images be ***progressive jpeg***. – Gabriele Petrioli Nov 12 '13 at 08:35
  • From a search engine's perspective (if you care about that) the actual image should be in the src, otherwise they'll think your site is full of loading images. – rybo111 Nov 12 '13 at 08:48
  • http://www.createjs.com/#!/PreloadJS this library has many abilities to show the loading process – sofl Nov 12 '13 at 08:52

3 Answers3

2

You can use preloader, but still should wait for image to load completely.

Other solution relies on how you saved the images.

You can open the image in an application like photoshop and when saving the file, click on the PROGRESSIVE option(Progressive option will make the image viewable even if it is not completely loaded).

In Photoshop:

  1. Open the image
  2. Click on the File -> save For Web ... (or Save for Web and Devices on previous versions)
  3. On the upper right part of the opened dialog, choose the 'JPEG' format
  4. You will see some options, choose 'Progressive'
  5. Save

This option will make the file slightly bigger in size, but the browser will show the images as they load.

Majid Kalkatechi
  • 691
  • 7
  • 15
0

Rather you can add image attribute 'title' or 'alt' value as 'Loading .... '

as title or alt property get displayed to user if image is about to load.

after image get loaded using Javascript you can change the alt or title value.

this is a basic solution. you can use it until you find proper solution.

Zainul Abdin
  • 835
  • 4
  • 10
0

Your question is very similar to my question where I discovered a solution which worked for me. It is unclear if it will work for you though because commenters have suggested it is dependent on the image being saved with the progressive option enabled.

For my case, the initial image always showed as it loaded and so my solution seemed to utilize that. For your case, if you were to initially load your big file first as a testcase and it appeared as it was downloaded, then I suspect my solution would also work for you.

Community
  • 1
  • 1
mdinger
  • 85
  • 1
  • 2
  • 8