個人博客—圖片懶加載
- 頁面加載時独撇，請求圖片屑墨，默認顯示占位符圖片；
默認顯示占位符圖片
- 當頁面下拉到圖片位置時纷铣，再把占位符圖片替換成相應的圖片绪钥；
替換占位符圖片
- 默認顯示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);
},
});
});
// 返回數(shù)據(jù)處理函數(shù)
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秒監(jiān)聽一下占位符圖片是否進入視口區(qū)域
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) ){
// 圖片進入視口區(qū)域則淡入對應的小圖
$(_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);
}
}
// 獲取數(shù)組中元素的位置
function get_index(all,ele){
for (var i=0; i<all.length; i++) {
if ($(all[i]).attr("bigsrc") == $(ele).attr("bigsrc")) {
return i;
}
}
}
// 圖片元素函數(shù)
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：個人博客
