Loading CSS background images before normal images?

Question

I have a ruby on rails web app, and in some views i have many heavy images( ) to render .The are generated in a Helper.

Answer 1

My approach is to lazy load the images using jquery and data- tags. This approach also allows me to choose different images based on device width and spare tablet/mobile users.

$lazy = $('img.lazy');

$(window).load(function(){
  // window load will wait for all page elements to load, including css backgrounds
  $lazy.each(function(){
    // run thru each img.lazy on the page. spare the jquery calls by making $this a variable
    $this = $(this);
    // if the window is greater then 800px wide, use data-src, otherwise, use the smaller graphic
    ($(window).width() >= 800) ? $this.attr('src', $this.attr('data-src')) : $this.attr('src', $this.attr('data-smallsrc'));
  });
});