jQuery加载完所有图像后加载多个图像 [英] jquery load multiple images after they have all finished loading

问题描述

我有一个从onclick事件调用的函数 例如

I have a function that gets called from an onclick event for example

<a href="#" onclick="changeImages()">load new</a> 

此功能基本上可以更改5张彼此重叠的图像:

This function basically changes 5 images that are layered on top of each other:

    function changeImages(){
    document.getElementById("ins5").src="image5.png";
    document.getElementById("ins4").src="image4.png";
    document.getElementById("ins3").src="image3.png";
    document.getElementById("ins2").src="image2.png";
    document.getElementById("ins1").src="image1.png";       
}

我想在它们全部加载时显示LOADING动画gif.一旦它们全部完成加载，然后将它们淡入.我到处搜索，找不到任何有效的方法.

What i would like is to display a LOADING animated gif while they all load. Once they have all finished loading then Fade them in. I have searched everywhere and cant find anything that works.

非常感谢！

推荐答案

使用jQuery.您可以将.load参数附加为回调函数.

use jQuery. You can attach the .load parameter as a callback function.

function changeImages(){
  $("#ins5").prop('src','image5.png');
  $("#ins4").prop('src','image4.png');
  $("#ins3").prop('src','image3.png');
  $("#ins2").prop('src','image2.png');
  $("#ins1").prop('src','image1.png');
  $("#ins5, #ins4, #ins3, #ins2, #ins1").load(function(){
    //This is ourcallback. Once our images have loaded, we display an alert
    alert("loaded!");
  });
}

这篇关于jQuery加载完所有图像后加载多个图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！