44.项目 1-博客前端：封装库--预加载

学习要点：

1.问题所在
2.设置代码

本节课，我们将编写一个图片加载的功能：延迟加载和预加载；顾名思义，延迟就是推
后加载，预加载就是提前加载的意思。

一．问题所在

QQ截图20190518094001.png

<dl>
<dt><imgxsrc="images/p1.jpg" bigsrc="images/p1big.jpg"
src="images/wait_load.jpg" class="wait_load" /></dt><dd>延迟加载图片</dd>
</dl>
<div id="photo_big">
<h2><img src="images/close.png" alt="" class="close" />图片预加载</h2>
<div class="big">
<imgsrc="images/loading.gif" alt="" />
<span class="left"></span>
<span class="right"></span>
<strong class="sl">&lt;</strong>
<strong class="sr">&gt;</strong>
<em class="index"></em>
</div>
</div>

CSS 代码

#photo_big {
width:620px;
height:511px;
border:1px solid #ccc;
position:absolute;
display:none;
z-index:9999;
background:#fff;
}
#photo_big h2 {
height:40px;
line-height:40px;
text-align:center;
font-size:14px;
letter-spacing:1px;
color:#666;
background:url(images/login_header.png) repeat-x;
margin:0;
padding:0;
border-bottom:1px solid #ccc;
cursor:move;
}
#photo_big h2 img {
float:right;
position:relative;
top:14px;
right:8px;
cursor:pointer;
}
#photo_big .big {
width:620px;
height:460px;
padding:10px 0 0 0;
background:#333;
}
#photo_big .big img {
display:block;
margin:0 auto;
position:relative;
top:190px;
}
#photo_big .big strong {
display:block;
width:100px;
height:100px;
line-height:100px;
text-align:center;
background:#000;
opacity:0;
filter:alpha(opacity=0);
font-size:60px;
color:#fff;
cursor:pointer;
position:absolute;
}
#photo_big .big strong.sl {
top:210px;
left:20px;
}
#photo_big .big strong.sr {
top:210px;
right:20px;
}
#photo_big .big span {
display:block;
width:300px;
height:450px;
background:#000;
opacity:0;
filter:alpha(opacity=0);
position:absolute;
cursor:pointer;
}
#photo_big .big span.left {
top:50px;
left:10px;
}
#photo_big .big span.right {
top:50px;
right:10px;
}
#photo_big .big em {
position:absolute;
top:480px;
right:20px;
color:#fff;
font-style:normal;
font-size:14px;
}

JS 代码

//图片弹窗
var photo_big = $('#photo_big');
photo_big.center(620, 510).resize(function () {
if (photo_big.css('display') == 'block') {
screen.lock();
}
});
$('#photo dt img').click(function () {
<!--http://pic2.desk.chinaz.com/file/201212/6/yidaizongshi6.jpg 测试用图-->
photo_big.center(620, 511).css('display', 'block');
screen.lock().animate({
attr : 'o',
target : 30,
t : 30,
step : 10
});
var temp_img = new Image();
$(temp_img).bind('load', function () {
$('#photo_big .big img').attr('src', temp_img.src).animate({
attr : 'o',
target : 100,
t : 30,
step : 10
}).css('width', '600px').css('height', '450px').css('top', 0).opacity(0);
});
temp_img.src = $(this).attr('bigsrc');
var children = this.parentNode.parentNode;
prev_next_img(children);
});
$('#photo_big .close').click(function () {
photo_big.css('display', 'none');
screen.animate({
attr : 'o',
target : 0,
t : 30,
step : 10,
fn : function () {
screen.unlock();
}
});
$('#photo_big .big img').attr('src', 'images/loading.gif').css('width', '32px').
css('height', '32px').css('top', '190px');
});
//拖拽
photo_big.drag($('#photo_big h2').last());
//图片鼠标划过
$('#photo_big .big .left').hover(function () {
$('#photo_big .big .sl').animate({
attr : 'o',
target : 50,
t : 30,
step : 10
});
}, function () {
$('#photo_big .big .sl').animate({
attr : 'o',
target : 0,
t : 30,
step : 10
});
});
$('#photo_big .big .right').hover(function () {
$('#photo_big .big .sr').animate({
attr : 'o',
target : 50,
t : 30,
step : 10
});
}, function () {
$('#photo_big .big .sr').animate({
attr : 'o',
target : 0,
t : 30,
step : 10
});
});
//图片点击上一张
$('#photo_big .big .left').click(function () {
$('#photo_big .big img').attr('src', 'images/loading.gif').
css('width', '32px').css('height', '32px').css('top', '190px');
var current_img = new Image();
$(current_img).bind('load', function () {
$('#photo_big .big img').attr('src', current_img.src).animate({
attr : 'o',
target : 100,
t : 30,
step : 10
}).opacity(0).css('width', '600px').css('height', '450px').css('top', 0);
});
current_img.src = $(this).attr('src');
var children = $('#photo dl dt img').ge(prevIndex($('#photo_big .big img').
attr('index'), $('#photo').first())).parentNode.parentNode;
prev_next_img(children);
});
//图片点击下一张
$('#photo_big .big .right').click(function () {
$('#photo_big .big img').attr('src', 'images/loading.gif').css('width', '32px').
css('height', '32px').css('top', '190px');
var current_img = new Image();
$(current_img).bind('load', function () {
$('#photo_big .big img').attr('src', current_img.src).animate({
attr : 'o',
target : 100,
t : 30,
step : 10
}).opacity(0).css('width', '600px').css('height', '450px').css('top', 0);
});
current_img.src = $(this).attr('src');
var children = $('#photo dl dt img').ge(nextIndex($('#photo_big .big img').
attr('index'), $('#photo').first())).parentNode.parentNode;
prev_next_img(children);
});
function prev_next_img(children) {
var prev = prevIndex($(children).index(), children.parentNode);
var next = nextIndex($(children).index(), children.parentNode);
var prev_img = new Image();
var next_img = new Image();
prev_img.src = $('#photo dl dt img').eq(prev).attr('bigsrc');
next_img.src = $('#photo dl dt img').eq(next).attr('bigsrc');
$('#photo_big .big .left').attr('src', prev_img.src);
$('#photo_big .big .right').attr('src', next_img.src);
$('#photo_big .big img').attr('index', $(children).index());
$('#photo_big .big .index').html(parseInt($(children).index()) + 1 + '/' +
$('#photo dl dt img').length());
}
//得到某一数组中当前索引的上一个
function prevIndex(current, parent) {
var length = parent.children.length;
if (current == 0) return length - 1;
return praseInt(current) - 1;
}
//得到某一数组中当前索引的下一个
function nextIndex(current, parent) {
var length = parent.children.length;
if (current == length - 1) return 0;
return parseInt(current) + 1;
}
//禁止选择文本
function predef(e) {
e.preventDefault();
}
//对于拖动滚动条时，出现的各种 bug 进行修复
//锁屏功能
Base.prototype.lock = function () {
for (var i = 0; i < this.elements.length; i ++) {
this.elements[i].style.width = getInner().width + getScroll().left + 'px';
this.elements[i].style.height = getInner().height + getScroll().top + 'px';
this.elements[i].style.display = 'block';
parseFloat(sys.firefox) < 4 ? document.body.style.overflow = 'hidden' :
document.documentElement.style.overflow = 'hidden';
addEvent(document, 'selectstart', predef);
addEvent(document, 'mousedown', predef);
addEvent(document, 'mouseup', predef);
}
return this;
};
//解屏功能
Base.prototype.unlock = function () {
for (var i = 0; i < this.elements.length; i ++) {
this.elements[i].style.display = 'none';
parseFloat(sys.firefox) < 4 ? document.body.style.overflow = 'hidden' :
document.documentElement.style.overflow = 'hidden';
removeEvent(document, 'selectstart', predef);
removeEvent(document, 'mousedown', predef);
removeEvent(document, 'mouseup', predef);
}
return this;
};
//触发浏览器窗口事件
Base.prototype.resize = function (fn) {
for (var i = 0; i < this.elements.length; i ++) {
var element = this.elements[i];
addEvent(window, 'resize', function () {
fn();
if (element.offsetLeft > getInner().width + getScroll().left - element.offsetWidth) {
element.style.left = getInner().width + getScroll().left - element.offsetWidth + 'px';
}
if (element.offsetTop > getInner().height + getScroll().top
- element.offsetHeight) {
element.style.top = getInner().height + getScroll().top
- element.offsetHeight + 'px';
}
});
}
return this;
};
//base_drag.js
if (left < 0) {
left = 0;
} else if (left <= getScroll().left) {
left = getScroll().left;
} else if (left > getInner().width + getScroll().left - _this.offsetWidth) {
left = getInner().width + getScroll().left - _this.offsetWidth;
}
if (top < 0) {
top = 0;
} else if (top <= getScroll().top) {
top = getScroll().top;
} else if (top > getInner().height + getScroll().top - _this.offsetHeight) {
top = getInner().height + getScroll().top - _this.offsetHeight;
}

感谢收看本次教程！