关于没有滚动条时图片加载
图片太少或者尺寸较小时,一个页面加载完,没有滚动条,就无法触发加载数据。
可以先执行一次加载解决。
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'); }