js 怎么实现图片一张张加载?

Tuesday 发布于 2013/08/09 17:33
阅读 3K+
收藏 0

var imgjson = {xxxxxxxxxxx};

imgjson.each(functon (){

// 这儿怎么写才能够让图片一定是加载完了, 才加载下一张?

})

加载中
1
Arrowing
Arrowing

var imgs = ['1.jpg', '2.jpg'],

img;

function loadByOne(){

if(imgs.length > 0){

img = new Image();

img.onload = function(){

document.getElementById('img').src = img.src;

loadByOne();

}

img.src = imgs.shift();

}

}


徐迎龙
徐迎龙
写的挺好
行陌路
行陌路
可以
0
sxgkwei
sxgkwei
这个有点难啊。你最多就是把图片的地址字符串按照先后顺序写到页面上去,但也控制不了图片1先加载完了才去加载图片2啊,此时你虽然写入页面字符串时是按照1到2的顺序,但是图片加载可是浏览器的事情,如果1图片太大,而2又很小,这样虽然2字符串写入页面在1之后,但也不能保证2就在1之后加载完啊,此时甚至是1还没加载完2就加载完了。
0
sxgkwei
sxgkwei
还是如上,你的要求确实有点难,但换个角度,是否可以把多张图片制作成1张,当一张来加载呢?此时,先把这1张总图加载出来,然后用CSS控制在不同的需要的地方,显示这张大图的不同部分就行了。
0
Tuesday
Tuesday

引用来自“sxgkwei”的答案

还是如上,你的要求确实有点难,但换个角度,是否可以把多张图片制作成1张,当一张来加载呢?此时,先把这1张总图加载出来,然后用CSS控制在不同的需要的地方,显示这张大图的不同部分就行了。
不能弄成一张图片, 就是图片太多, 需要用这招来慢慢显示.
sxgkwei
sxgkwei
那能不能这样,把页面切分一下,页面只直接加载最上面一部分图片,到底是多少图片还是要看你的页面在一般人机器上会被看到多少,然后剩下的,在页面加载完成后,在一点点给img把src赋值上去,让它去加载?
0
mark35
mark35

可以考虑绑定image的加载事件, 参考这个看看

http://hahaxiao.techweb.com.cn/archives/512.html

还可以用lazyload方式来加载,原理是判断窗口位置,进入窗口或者快接近窗口的才加载,这样就避免一次性加载页面所有图片

0
Tuesday
Tuesday

引用来自“mark35”的答案

可以考虑绑定image的加载事件, 参考这个看看

http://hahaxiao.techweb.com.cn/archives/512.html

还可以用lazyload方式来加载,原理是判断窗口位置,进入窗口或者快接近窗口的才加载,这样就避免一次性加载页面所有图片

lazyload 不想用这个, 想自己写.
0
白帝
//设置透明度
function setopacity(a,b)
{
	document.all ? a.style.filter = 'alpha(opacity=' + b + ')' : a.style.opacity = b / 100;
}
//淡入图片
function fadein(a)
{
	var b=0,
	c = window.setInterval(function()
	{
		b +=2;
		setopacity(a,b);
		b == 100 && window.clearInterval(c);
	},1)
}
//在可见区域加载并显示图片
function imgload(obj,i)
{
	var img = new Image();
	i = i || 0;
	img.onload = function()
	{
		obj[i].src = img.src;
		obj[i].removeAttribute('data-src');//移除自定义的属性
		setopacity(obj[i],0);//设置图片透明,防止图片闪烁
		obj[i].style.visibility = 'visible';//图片可见
		fadein(obj[i]);//图片淡入
		//递归确保图片的载入顺序
		i+1<obj.length && obj[i].offsetTop<document.body.clientHeight+document.body.scrollTop && imgload(obj,i+1);
	}
	//存在自定义属性则加载该图片地址,否则再次判断下标<对象长度并且在可视范围内时,递归处理下一个img元素
	obj[i].hasAttribute('data-src') ? img.src = obj[i].getAttribute('data-src') : (i+1<obj.length && obj[i].offsetTop<document.body.clientHeight+document.body.scrollTop && imgload(obj,i+1));
}
//预加载图片(单独获取img对象是为避免在递归中重复获取,假如是瀑布流等滚动加载图片的网站则应该在递归函数中获取对象。或者在滚动追加img元素时使用push方法)
function lazyload()
{
	var elements = document.getElementsByTagName('img');
	imgload(elements)
}
window.onload = function()
{
	lazyload();
	window.onscroll = function(){lazyload();}
}

样式:img{ visibility:hidden;} 

HTML:<img width="1000" height="500" data-src="banner.jpg" alt="图片" />

如果是src中存在一个低质量图片的话,可以去掉"visibility:hidden;"相关的代码。

返回顶部
顶部