0

I have img background in my angular app, in slow connections the image loads slow and shows partially during the loading.

Is there a way to wait until the image fully loads and then to show it? and not to show it in loading progress?

user2095956
  • 403
  • 2
  • 7
  • 16
  • [Please google before posting T_T](http://stackoverflow.com/questions/17547917/angularjs-image-onload-event) – Appeiron Nov 04 '15 at 17:15
  • Use _jpeg_ images with 70% quality, optimized for web and set to load as [_progressive jpegs_](https://en.wikipedia.org/wiki/JPEG#JPEG_compression)... – War10ck Nov 04 '15 at 17:27
  • Actually, it's a background image - they are not included in the onload event. @Appeiron – Shikkediel Nov 04 '15 at 20:13

1 Answers1

0

Most likely it is caused by the size and resolution of the image. To make it load faster reduce image sizes using either GIF, PNG-8. or JPEG as the file formats. Make sure the size matches your usage and set the size for each page with the height and width. Do not make use of scaling, especially from larger to smaller images. The image result might look fine on screen but the file size will be the same. To truly take advantage of the smaller dimensions, use an image editing program and scale the image accordingly. Also play around with different image compressions.

Tomas
  • 1,131
  • 2
  • 12
  • 25