Question

请教如何用jQuery或其他办法实现在图片A加载完成前显示图片B

因为页面里有很多图片A，比较大，加载需要一定时间，所以我想在真实图片加载前显示个图片B（例如，“正在加载”字样）。

请问如何用jQuery或者别的办法实现，谢谢。

Answer 1

<script>
function hideloading(obj){
var $this=$(obj);
$this.show().next("img").hide();

}
</script>
<div>
<img src="xxx.jpg" onload="hideloading(this)" style="visibility: hidden" /> 要显示的图片
<img src="loading.png"/> 等待图片

</div>

思路大概就是这样

追问

有点明白了，那个next("img")是指下一个图片的意思吗？能否按照以下这样重新写一下，然后我再按图索骥，谢谢。

正式图片：
等待图片：

追答

next("img")是同级的下个img标签，具体可以参考api，原理懂了，你可以试着自己摸索，出问题在问哈

Answer 2

jquery的ajax方法中有参数的，你可以在beforeSend中调用一个现实正在加载字样的图片，或者那种转圈的“菊花”的图片。
具体实现过程可以是在页面加载完成后调用一个ajax方法来加载你的图片，图片加载完成之前先用beforesend来加载一个图片

Answer 3

function loadimg(arr,funLoading,funOnLoad,funOnError){
	var numLoaded=0,
	numError=0,
	isObject=Object.prototype.toString.call(arr)==="[object Object]" ? true : false;
 
	var arr=isObject ? arr.get() : arr;
	for(a in arr){
		var src=isObject ? $(arr[a]).attr("data-src") : arr[a];
		preload(src,arr[a]);
	}
 
	function preload(src,obj){
		var img=new Image();
		img.onload=function(){
			numLoaded++;
			funLoading && funLoading(numLoaded,arr.length,src,obj);
			funOnLoad && numLoaded==arr.length && funOnLoad(numError);
		};
		img.onerror=function(){
			numLoaded++;
			numError++;
			funOnError && funOnError(numLoaded,arr.length,src,obj);
		}
		img.src=src;
	}
 
}
参数说明：
  arr：可以是存放图片路径的一个数组，也可以是选取到的img的jquery对象
  funLoading：每一个单独的图片加载完成后执行的操作
  funOnLoad：全部图片都加载完成后的操作
  funOnError：单个图片加载出错时的操作

 

调用示例：loadimg($("img"),funloading_obj,imgonload,funOnError);

Answer 4

这个很简单啊，在你放图片的的哪里在加一个div里面放“正在加载的图片”，然后在js里面控制，在进加载大图片的方法最前面把“正在加载”的图片display属性设置block，然后在加载方法完成后的success里面在把“正在加载”的图片display属性设置成none就行了

Answer 5

如果你只是想显示正在加载这样的字样就简单了
只要设置图片a的背景为图片b就行了
在a没有加载出来之前是可以显示背景的
这样你要的效果就出来了