Question

我想知道在用户打开网站时是否有办法控制首先加载哪个图片。问题是我有一个简单的单页网站，花了太多时间打开第一张图片（大家图像 - example）。我想首先加载这个图像，然后加载网站上的其他图像，我应该使用Jquery手动为每个图像（$.attr("src")后使用document.ready）吗？还是有更好的方法？

Answer 1

控制首先加载哪个图像

如果您想控制首先加载哪些图像并同步加载图像，请尝试此操作。 Working JsFiddle

＆＃13;

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

＆＃13;

<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>

＆＃13;

这个想法是将所有图像src保存在一个数组中并加载第一个图像，并在图像的加载事件上增加数组索引并加载第二个图像等等。这样我们就可以控制应加载的图像的顺序。让我知道这是否有帮助

控制首先加载哪个图片

1 个答案: