网站优化的思路之一:

图片延迟加载:
1、静态资源图片的延迟加载(一般是网站上固定的大图,为了不影响第一次加载页面的速度,我们需要把这张大图延迟加载)开始的时候,我们给当前大图所在的位置的div加一个默认的背景图(要求小,起到占位的作用)

 

//1、用setTimeout循环创建定时器产生的累加的问题:在每一次执行方法的时候,第一步首先把之前创建的定时器清除掉
//2、在设置定时器的时候,如果一个匿名函数里面又包含了一个小的函数执行,然而小函数执行要用到匿名函数的上级作用域的东西,
// 这样匿名函数作用域不销毁,性能不好
·
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>静态资源图片的延迟加载</title>
<style type="text/css">
body, div, img {
margin: 0;
padding: 0;
}

img {
border: none;
}

html, body {
width: 100%;
}

#div1 {
width: 100%;
height: 290px;
background: url("img/defaultBg.jpg") no-repeat;
background-size: 100% 100%;
background: none \9;
_background: none;
background-color: #37C7D4;
}

#div1 img {
width: 100%;
height: 290px;
opacity: 0;
filter: alpha(opacity=0);
}
</style>
</head>
<body>
<div id="div1">

</div>
<script type="text/javascript" src="js/tools.min.js"></script>
<script type="text/javascript">
//图片延迟加载:
//1、静态资源图片的延迟加载(一般是网站上固定的大图,为了不影响第一次加载页面的速度,我们需要把这张大图延迟加载)
//开始的时候,我们给当前大图所在的位置的div加一个默认的背景图(要求小,起到占位的作用)
var t = new Tool;
var oDiv = document.getElementById("div1");
function loadImg() {
var oImg = new Image;
oImg.src = "img/bg.jpg";
oImg.alt = "";
oImg.onload = function () {
oDiv.appendChild(oImg);
move(this);
}
}
//jQuery-->fadeIn
function move(curEle) {
var count = 0;
_move();
function _move() {
window.clearTimeout(curEle.timer);
count += 0.02;
if (count >= 1) {
t.setCss(curEle, "opacity", 1);
return;
}
t.setCss(curEle, "opacity", count);
curEle.timer = window.setTimeout(_move, 10);
}
}
window.setTimeout(loadImg, 500);

</script>
</body>
</html>
···