0

I'm displaying images from the National Parks Service API for a web app and the images displaying in the thumbnails are causing a lot of lag.

Is there a way to compress image urls before displaying or reduce the lag somehow?

The code below is how the images are displayed. 

for (let j = 0; j < parkInfo.data[i].images.length; j++) {
  $('#pics').append('<img src="' + parkInfo.data[i].images[j].url +
    '" width="33%" altText="' + parkInfo.data[i].images[j].altText +
    '" class="img-thumbnail">');

Example image: enter image description here

How the images are displayed currently: enter image description here

Hasher
  • 62
  • 1
  • 2
  • 8
Lam Pham
  • 39
  • 1
  • 1
  • 4
  • 1
    If you have a backend service, you can run your images through a proxy which handles compression/resize as needed. To the best of my knowledge, there is no way to do this purely on the browser (unless you use another third party service - there are many) – Chirag Ravindra May 15 '18 at 04:32
  • 1
    _Is there a way to compress image urls before displaying or reduce the lag somehow?_ - No, but you can precache them. – Randy Casburn May 15 '18 at 04:32
  • Check this: https://stackoverflow.com/questions/287750/how-do-i-pre-cache-images-for-quick-viewing-with-javascript – Randy Casburn May 15 '18 at 04:33

0 Answers0