如果一个网站的图片多了起来的话,网站的加载速度就是一个问题,最近的一个网站用firebug看的话加载速度都已经达到了50多秒,关于提高网页的加载速度的话,除了一些压缩图片,采用png格式以及减少代码量等标准的方法以外,自己还是比较乱,于是先把这段时间看到了的写下来。
今天补充一下,又学习到了一些比较重要的技术点,有时候网站在比较渣的电脑上运行起来会比较卡,如果这样子的话自己加上这样一行代码,先加载出整个背景框架来,就会好很多
body{background:url(about:blank) fixed
第一种方法,部分图片延迟加载
这是管用的,用火狐的firebug测试的话还是能看出一定的效果来的。
网页图片延迟加载
第一步,先将所有需要最后加载的图片代码进行修改: (将src属性替换成thissrc)
例如:
<img src="/images/ad_1.jpg">
替换成:
<img thissrc="/images/ad_1.jpg">
第二步:
将下面的js代码放在页面最底部:
<script language="javascript">
imgs = document.getElementsByTagName("img");
imgsnum = imgs.length;
for(imgi = 0 ;imgi < imgsnum;imgi++){
if ((typeof(imgs[imgi].src) == 'undefined' || imgs[imgi].src =='') && imgs[imgi].getAttribute('thissrc') != null)
imgs[imgi].src = imgs[imgi].getAttribute('thissrc');
}
</script>
当然这个是不能解决最终问题的,还是要靠一些本质的手段。
第二种方法:加 script
首先必须承认js 用多了 的话真不是好东西。javascript带来的还不止是速度慢,还有很重要的一点就是大多数人使用它并不知道它是怎么写的,只是从别的站拷贝过来用的,一来在流传的过程中,会存在失去了部分代码的情况,结果你拷贝过来的可能是错误或不完整的代码,这样会导致你的网站瘫痪;二来是如果有恶作剧的人将恶意代码伪装成特效代码给你,而你又不懂,拷到网站上,那么不但你打开你的网站的时候会受害,别人打开你的网站时也很有可能成为受害者。
在一个div里面添加上script的一个没用的标签,那么这个div里面的东西就会被提前加载:
<div id="div1">
<img src="images/Div1.jpg" /></div>
<div id="div2">
<img src="images/Div2.jpg" /></div>
<div id="div3">
<img src="images/Div3.jpg" /></div>
<div id="cssContainer1">
<div id="cssContainer2" style="background-image: url('images/Css2.JPG')">
</div>
<script>
var a;
for (var i = 0; i < 1000; i++) {
a += i;
}
</script>
<div id="cssContainer3">
</div>
<div id="cssContainer4" style="background-image: url('images/Css4.JPG')">
</div>
</div>
<div id="div4">
<img src="images/Div4.jpg" /></div>
<div id="div5">