about 8 years ago
從網站下載新版本Lazy Load Plugin for jQuery
範例中還有使用jQuery BlockUI Plugin來做一個燈箱效果
<img class="lazy" src="img/grey.gif" data-original="./picCustom.do?act=showImage&picturesid=${data.picturesid}" width="150">
<script>
$(function() {
$("img.lazy").click(function() {
$('#displayBox').attr('src',$(this).attr('data-original'));
var theImage = new Image();
theImage.src = $(this).attr('data-original');
//取得影像實際的長寬
var imageWidth = theImage.width;
var imageHeight = theImage.height;
//計算縮放比例
var w=$(window).width()/imageWidth;
var h=$(window).height()/imageHeight;
var pre=1;
if(w>h){
pre=h;
}else{
pre=w;
}
//設定目前的縮放比例
var imageWidthPre = imageWidth*pre;
var imageHeightPre = imageHeight*pre;
//設定目前的縮放比例
$('#displayBox').width(imageWidthPre);
$('#displayBox').height(imageHeightPre);
$.blockUI({
message: $('#displayBox'),
css: {
top: ($(window).height() - imageHeightPre) /2 + 'px',
left: ($(window).width() - imageWidthPre) /2 + 'px',
width: imageWidthPre+'px'
}
});
$('.blockOverlay').attr('title','Click to unblock').click($.unblockUI);
});
});
</script>