Image Lazy load

ionic-v1
1

Hi All,

I want to implement lazy load. while image displaying from server it is taking time to display. So, till image get display loader should display.

How i can implement image lazy load suing ionic ??

Thanks.

2

I imagine you could use the following function to achieve what you want:

function preloadImage(imgSrc, callback){
  var imagePreloader = new Image();

  imagePreloader .src = imgSrc;
  if(imagePreloader .complete){
    //Sometimes the image is in cache, and callback will not be called since it is already loaded. Execute immediately here
    callback();
    imagePreloader.onload=function(){};
  }
  else{
    imagePreloader.onload = function() {
      callback();
      //Clear onLoad, IE behaves irratically with animated gifs otherwise
      imagePreloader .onload=function(){};
    }
  }
}

You could then set a default loading spinner (which you can preload during app initialization) and using the callback replace the loading spinner with the desired image.