个人博客—图片懒加载
- 页面加载时，请求图片，默认显示占位符图片；
默认显示占位符图片
- 当页面下拉到图片位置时，再把占位符图片替换成相应的图片；
替换占位符图片
- 默认显示8张图片，点击加载更多图片，则再加载8张；若少于8张，则隐藏加载更多图片按钮；
默认显示8张
点击加载更多图片按钮
隐藏按钮
- 点击图片，弹窗显示对应的大图；
点击显示大图
- 鼠标滑过大图左右两边分别显示向左向右的标志；
鼠标滑过
- 点击向左向右标志或者大图左右两侧，切换图片到上一张或下一张；若到第一张则上一张是最后一张；最后一张的下一张是第一张；
html部分
<div id="tabs">
<ul>
<li><a href="javascript:void(0)" class="img_game" alt="2">风景名胜</a></li>
<li><a href="javascript:void(0)" class="img_view" alt="1">游戏人物</a></li>
<li><a href="javascript:void(0)" class="img_movie" alt="3">电影动漫</a></li>
</ul>
</div>
js部分
// 图片浏览对话框
$('#preload').dialog({
autoOpen : false,
modal : true,
resizable : false,
width : 620,
height : 510,
});
//默认显示风景名胜tab
var tabs_this = $("#tabs ul li a").first();
$.ajax({
method : 'post',
url : 'php/get_img.php',
data : {
'titleid' : '2'
},
success : function (response) {
var json_img = JSON.parse(response);
show_img(json_img);
},
});
// tabs点击事件
$("#tabs ul li a").on('click', function () {
tabs_this = this;
$.ajax({
url : 'php/get_img.php',
type : 'POST',
data : {
titleid : $(tabs_this).attr('alt'),
},
success : function (response) {
var json_img = $.parseJSON(response);
show_img(json_img);
},
});
});
// 返回数据处理函数
function show_img(json_img){
var count = 0,
img_list_wrap,
img_list = [];
$.each(json_img, function (index, value) {
count = value.count;
img_list += create_img(value);
});
img_list_wrap = $('#tabs div:visible');
$(img_list_wrap).html(img_list + '<div class="load_more_img">加载更多图片</div>');
var page = 2,
load_more_img = $(img_list_wrap).find('.load_more_img');
if (count < page ) {
$(load_more_img).off('click');
$(load_more_img).hide();
}
preload();
$(load_more_img).button().on('click', function () {
$(load_more_img).button('disable');
$.ajax({
url : 'php/get_img.php',
type : 'POST',
data : {
titleid : $(tabs_this).attr('alt'),
page : page,
},
beforeSend : function (jqXHR, settings) {
$(load_more_img).html('<img src="img/more_load.gif" />');
},
success : function (response) {
var json_img_more = $.parseJSON(response);
$.each(json_img_more, function (index3, value) {
$(img_list_wrap).find('.img_list').last().after('<dl class="img_list"><dt><img xsrc="img/' + value.small + '" bigsrc="img/' + value.big + '" src="img/wait_load.jpg"' + ' ' + 'class="wait_load"' + ' ' + 'alt="wait_load" /></dt><dd>' + value.img_title + '</dd></dl>');
});
$(load_more_img).button('enable');
$(load_more_img).html('加载更多评论');
page++;
if (page > count) {
$(load_more_img).off('click');
$(load_more_img).hide();
}
preload();
}
});
});
}
// 默认显示预加载图片占位符
function preload(){
// 第一次请求到的图片全部是占位符图片
var wait_load = $('#tabs .wait_load');
all = new Array();//存放每一个img元素
// 滚动和改变大小事件
$(window).on('scroll', _wait_load);
$(window).on('resize', _wait_load);
// 每0.1秒监听一下占位符图片是否进入视口区域
function _wait_load() {
setTimeout(function () {
for (var i = 0; i < $(wait_load).length; i ++) {
var _this = wait_load[i];
all.push(_this);
if (($(window).innerHeight() + $(window).scrollTop()) >= ($(_this).offset().top+_this.height/2) ){
// 图片进入视口区域则淡入对应的小图
$(_this).attr('src', $(_this).attr('xsrc')).fadeIn("slow");
// 当前图片点击事件
// 点击后弹出大图对话框，并把当前点击图片的大图显示在对话框中
// 并获取当前点击图片的索引位置,以此来获取上一张和下一张图片
$(_this).on("click",function(){
// 获取当前点击图片的索引位置
var a = get_index(all,this);
$("#preload .left,#preload .pre_img").on("click",function(){
if (a == 0){
a = all.length - 1;
}else{
a = a-1;
}
$("#preload .big_img").attr("src",$(all[a]).attr('bigsrc')).fadeIn("slow");
});
$("#preload .right,#preload .next_img").on("click",function(){
if (a == all.length - 1){
a = 0;
}else{
a = a+1;
}
$("#preload .big_img").attr("src",$(all[a+1]).attr('bigsrc')).fadeIn("slow");
});
$("#preload").dialog("open");
$("#preload .big_img").attr("src",$(this).attr('bigsrc')).fadeIn("slow");
//图片鼠标划过
$("#preload dl .left").bind(
"mouseover", function () {
$('#preload .pre_img').show();
return false;
}).bind(
"mouseout", function () {
$('#preload .pre_img').hide();
return false;
});
$("#preload dl .right").bind(
"mouseover", function () {
$('#preload .next_img').show();
return false;
}).bind(
"mouseout", function () {
$('#preload .next_img').hide();
return false;
});
$("#preload dl .pre_img").bind(
"mouseover", function () {
$('#preload .pre_img').show();
return false;
});
$("#preload dl .next_img").bind(
"mouseover", function () {
$('#preload .next_img').show();
return false;
});
});
}
}
}, 100);
}
}
// 获取数组中元素的位置
function get_index(all,ele){
for (var i=0; i<all.length; i++) {
if ($(all[i]).attr("bigsrc") == $(ele).attr("bigsrc")) {
return i;
}
}
}
// 图片元素函数
function create_img(opt){
return '<dl class="img_list"><dt><img xsrc="img/' + opt.small + '" ' + 'bigsrc="img/' + opt.big + '" src="img/wait_load.jpg"' + ' ' + 'class="wait_load"' + ' ' + 'alt="wait_load" /></dt><dd>' + opt.img_title + '</dd></dl>';
}
php部分
<?php
require 'config.php';
$_sql = mysql_query("SELECT COUNT(*) AS count FROM img WHERE titleid='{$_POST['titleid']}'");
$_result = mysql_fetch_array($_sql, MYSQL_ASSOC);
$_pagesize = 8;
$_count = ceil($_result['count'] / $_pagesize);
$_page = 1;
if (!isset($_POST['page'])) {
$_page = 1;
} else {
$_page = $_POST['page'];
if ($_page > $_count) {
$_page = $_count;
}
}
$_limit = ($_page - 1) * $_pagesize;
$query = mysql_query("SELECT ({$_count}) AS count,id,titleid,small,big,img_title,date FROM img WHERE titleid='{$_POST['titleid']}' ORDER BY date DESC LIMIT {$_limit},{$_pagesize}") or die('SQL 错误！');
$json = '';
while (!!$row = mysql_fetch_array($query, MYSQL_ASSOC)) {
foreach ( $row as $key => $value ) {
$row[$key] = urlencode(str_replace("\n","", $value));
}
$json .= urldecode(json_encode($row)).',';
}
echo '['.substr($json, 0, strlen($json) - 1).']';
mysql_close();
?>
代码在Github：个人博客
