0

I'm wondering if there is a way to control which image loads first when the user opens the website. The problem is that I have a simple one-page website that is taking too much time to open the first image (Big Home image - example). I would like to load this image first, and then load the other images in the website, should I do it manually with Jquery for each image (using $.attr("src") after document.ready)? or is there a better way?

Onur Yıldırım
  • 32,327
  • 12
  • 84
  • 98
Alejandro Veintimilla
  • 10,743
  • 23
  • 91
  • 180
  • Don't do that. Just use appchache since you should be targeting HTML5. See http://www.html5rocks.com/en/tutorials/appcache/beginner – Onur Yıldırım Mar 04 '16 at 00:18
  • @OnurYıldırım caching doesn't control the order in which images are loaded – jasonscript Mar 04 '16 at 00:40
  • You can load all the images into an array first, possibly sort the array into the desired order, then display the images in that order, however this is not recommended, if your users are fairly remote from you the 'first' image may arrive last over the Network, holding everything else up. – Arif Burhan Mar 04 '16 at 00:48
  • @jasonscript the reason he's asking to control the order is that a particular image takes too long. but this will happen every time the page is loaded. what I suggest will cache the image(s) and provide better UX. – Onur Yıldırım Mar 04 '16 at 00:54
  • 1
    @OnurYıldırım first-time users will still have this problem. I think OP is asking for a way of loading the images asynchronously so that the page continues to load even when images haven't finished loading yet. Currently I assume the images are blocking the load of the rest of the page – jasonscript Mar 04 '16 at 01:01
  • 1
    @jasonscript well, cannot load images async but he could do this: set `data-src` attributes to store the image links. Then set the actual `src` within the big image's `onload` event. Then cache the images. But still, if the big image is too big in size, this will still take too much to load. So the image should be optimized properly. – Onur Yıldırım Mar 04 '16 at 01:17

1 Answers1

1

Control which image loads first

If you want to have control over which images to load first and load the images synchronously then try this. Working JsFiddle

var loaded = 0;
var imgSrcArray = ["https://upload.wikimedia.org/wikipedia/commons/thumb/4/49/Small_icosihemidodecahedron.png/100px-Small_icosihemidodecahedron.png",
"https://upload.wikimedia.org/wikipedia/commons/thumb/d/d9/Small_cubicuboctahedron.png/100px-Small_cubicuboctahedron.png",
"https://upload.wikimedia.org/wikipedia/commons/thumb/0/0d/Small_dodecahemidodecahedron.png/100px-Small_dodecahemidodecahedron.png",
"https://upload.wikimedia.org/wikipedia/commons/thumb/a/ad/Small_rhombicuboctahedron.png/100px-Small_rhombicuboctahedron.png"];


$('div img').on('load',function(){
 loaded++;
 var indexOfThisImg = imgSrcArray.indexOf($(this).attr('src'));
 $('#output').append("loaded image " +indexOfThisImg + '<br/>');
 loadNextImg(loaded);
});

function loadNextImg(index){
   $('div img:eq('+index+')').attr('src',imgSrcArray[index]); 
   // if the imag tags are not continuous and you want to load the images in random position in an order then you can maintain the order of the images in a separate array and then use that indexes to load the images. 
}

$('div img:eq(0)').attr('src',imgSrcArray[0]); 
//trigger the load of first image, which starts the chain reaction   
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<img />
<img />
<img />
<img />
</div>
<div id="output">
  
</div>

The idea is to hold all the images src in an array and load the first image, and on the load event of the image increment the array index and load the second one and so on.. This way we have control on the order of the images that should load. let me know if this helps

Rajshekar Reddy
  • 18,647
  • 3
  • 40
  • 59