js中改变窗口重新加载一次.js页面怎么做
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js中改变窗口重新加载一次.js页面怎么做相关的知识,希望对你有一定的参考价值。
window.onresize = function ()func1();
func2();
当页面大小改变时,调用函数func1和func2,你还可以自己定义,具体看你想做什么 参考技术A 是想要重新加载一下页面吗?
JS如何实现图片分段加载
我的一个页面有大量图片组成,大楷100张,我不想让浏览器一次性并发下载完,我想用JS实现:打开页面下载10张,暂停20秒,再下载10张,以此类推。这样可以吗,怎么实现呢?
意思应该是延迟加载,延迟加载主要是因为一次加载图片过多会导致网络请求过多,性能下降。所以才有延迟加载这一说。
主要思路:
在HTML引入图片是,不要用src直接引入图片路径,
定一个_src私有属性存储图片路径。
当页面加载时,先加载可视区的图片,即将私有属性_src 修改为src。
下面是思路的代码实现:
<style>* margin:0px; padding:0px;
ul width:996px; overflow:hidden; border:1px solid #ccc; margin:10px auto;
li list-style:none; float:left; margin:10px; width:300px; border:1px solid yellow; height:200px;
img width:100%; display:block; height:100%
</style>
<script>
window.onload=function()
var aImg = document.getElementsByTagName(\'img\');
timeOut();
window.onscroll = timeOut;
function timeOut()
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
var clientHeight = document.documentElement.clientHeight;
var top = scrollTop + clientHeight;
for(var i=0;i<aImg.length;i++)
var oImgTop = getPos(aImg[i]).top;
if(top > oImgTop)
aImg[i].src = aImg[i].getAttribute(\'_src\');
function getPos(obj)
var left = 0;
var top = 0;
while(obj)
left += obj.offsetLeft;
top += obj.offsetTop;
obj = obj.offsetParent;
return \'left\':left,\'top\':top;
;
</script>
</head>
<body>
<ul>
<li><img _src="img/b1.jpg" /></li>
<li><img _src="img/b2.jpg" /></li>
<li><img _src="img/b3.jpg" /></li>
<li><img _src="img/b4.jpg" /></li>
<li><img _src="img/b5.jpg" /></li>
<li><img _src="img/b6.jpg" /></li>
<li><img _src="img/b7.jpg" /></li>
<li><img _src="img/b8.jpg" /></li>
<li><img _src="img/b9.jpg" /></li>
<li><img _src="img/b10.jpg" /></li>
<li><img _src="img/b1.jpg" /></li>
<li><img _src="img/b2.jpg" /></li>
<li><img _src="img/b3.jpg" /></li>
<li><img _src="img/b4.jpg" /></li>
<li><img _src="img/b5.jpg" /></li>
<li><img _src="img/b6.jpg" /></li>
<li><img _src="img/b7.jpg" /></li>
<li><img _src="img/b8.jpg" /></li>
<li><img _src="img/b9.jpg" /></li>
<li><img _src="img/b10.jpg" /></li>
<li><img _src="img/b1.jpg" /></li>
<li><img _src="img/b2.jpg" /></li>
<li><img _src="img/b3.jpg" /></li>
<li><img _src="img/b4.jpg" /></li>
<li><img _src="img/b5.jpg" /></li>
<li><img _src="img/b6.jpg" /></li>
<li><img _src="img/b7.jpg" /></li>
<li><img _src="img/b8.jpg" /></li>
<li><img _src="img/b9.jpg" /></li>
<li><img _src="img/b10.jpg" /></li>
<li><img _src="img/b1.jpg" /></li>
<li><img _src="img/b2.jpg" /></li>
<li><img _src="img/b3.jpg" /></li>
<li><img _src="img/b4.jpg" /></li>
<li><img _src="img/b5.jpg" /></li>
<li><img _src="img/b6.jpg" /></li>
<li><img _src="img/b7.jpg" /></li>
<li><img _src="img/b8.jpg" /></li>
<li><img _src="img/b9.jpg" /></li>
<li><img _src="img/b10.jpg" /></li>
</ul> 参考技术A 你可以写一个函数,来判断当前显示到了哪个区域,然后显示本区域的图片.这个其实你都不用自己去做了,使用JSON自己就带有这样的功能,应用和更改起来都比较方便,相率也非常优秀。 参考技术B 这里有一个延迟加载效果 可以实现你的效果
参考资料:http://www.blueidea.com/common/shoutbox/redir.asp?3=i&id=11716
本回答被提问者采纳以上是关于js中改变窗口重新加载一次.js页面怎么做的主要内容,如果未能解决你的问题,请参考以下文章