关于没有滚动条时图片加载

来源:2-5 onscroll事件实现瀑布流布局的图片加载功能

ahao430

2016-05-25 16:55

图片太少或者尺寸较小时,一个页面加载完,没有滚动条,就无法触发加载数据。

可以先执行一次加载解决。

window.onload=function(){
	waterfall('main','box');
	var dataInt={"data":[{"src":'1.jpg'},{"src":'2.jpg'},{"src":'3.jpg'},{"src":'4.jpg'},{"src":'5.jpg'},{"src":'6.jpg'},{"src":'7.jpg'},{"src":'8.jpg'},{"src":'9.jpg'},{"src":'10.jpg'},{"src":'11.jpg'},{"src":'12.jpg'},{"src":'13.jpg'},{"src":'14.jpg'},{"src":'15.jpg'},{"src":'16.jpg'},{"src":'17.jpg'}]};
	addpic();
	window.onscroll=function(){
		if(checkScrollSlide){
			addpic();
		}
	}
	function addpic(){
	var oParent=document.getElementById('main');
	for(var i=0;i<dataInt.data.length;i++){
		var oBox=document.createElement('div');
		oBox.className='box';
		oParent.appendChild(oBox);
		var oPic=document.createElement('div');
		oPic.className='pic';
		oBox.appendChild(oPic);
		var oImg=document.createElement('img');
		oImg.src="img/"+dataInt.data[i].src;
		oPic.appendChild(oImg);
	}
	waterfall('main','box');
	}
}

但是把这个加载函数,放在window.onload外面调用就不行了,求解。为何别的函数都可以放在外面调用,这个放外面就不行了。

window.onload=function(){
	waterfall('main','box');
	var dataInt={"data":[{"src":'1.jpg'},{"src":'2.jpg'},{"src":'3.jpg'},{"src":'4.jpg'},{"src":'5.jpg'},{"src":'6.jpg'},{"src":'7.jpg'},{"src":'8.jpg'},{"src":'9.jpg'},{"src":'10.jpg'},{"src":'11.jpg'},{"src":'12.jpg'},{"src":'13.jpg'},{"src":'14.jpg'},{"src":'15.jpg'},{"src":'16.jpg'},{"src":'17.jpg'}]};
	addpic();
	window.onscroll=function(){
		if(checkScrollSlide){
			addpic();
		}
	}
	
}

function addpic(){
	var oParent=document.getElementById('main');
	for(var i=0;i<dataInt.data.length;i++){
		var oBox=document.createElement('div');
		oBox.className='box';
		oParent.appendChild(oBox);
		var oPic=document.createElement('div');
		oPic.className='pic';
		oBox.appendChild(oPic);
		var oImg=document.createElement('img');
		oImg.src="img/"+dataInt.data[i].src;
		oPic.appendChild(oImg);
	}
	waterfall('main','box');
	}

写回答 关注

1回答

  • 慕虎0796253
    2016-05-25 17:35:58
    已采纳

    在没有onload完页面之前,,addpic函数中,怎么能寻找到main,div,img这些东西,这些DOM都还没加载进来

    ahao43...

    嗯,有点理解了。像waterfall等函数里面引用的只是参数parent,我这里是具体的dom元素就不行了。

    2016-05-25 18:42:34

    共 1 条回复 >

瀑布流布局

瀑布流布局是网站比较流行的一种布局方式,教你实现三大方式

97759 学习 · 736 问题

查看课程

相似问题