>웹 프론트엔드 >JS 튜토리얼 >JQuery 이미지 지연 로딩 및 비례 배율 플러그인_jquery

JQuery 이미지 지연 로딩 및 비례 배율 플러그인_jquery

WBOY
WBOY원래의
2016-05-16 18:42:10883검색

최근에 JS OOP를 배워서 이렇게 썼습니다.
사용 방법:
$(".viewArea img").zoom({height:74,width:103})
효과 데모:
http://demo.jb51.net/html/jquery_img/jquery_img.htm
코드:

복사 code 코드는 다음과 같습니다.

(function($){
$.fn.zoom = function(settings){
// 일부 기본 구성;
설정 = $.extend({
높이:0,
너비:0,
loading:"lightbox-ico-loading.gif"
},settings);
var 이미지 = this ;
$(images).hide();
var loading = new Image()
loading.className="loading"
loading.src = 설정. loading;
$( Images).after(loading);
//미리 로드 중
var preLoad = function($this){
var img = new Image(); = $this.src;
if (img.complete) {
processImg.call($this);
return;
}
//$this.src = loading.src; //오류가 발생합니다.
img.onload = function(){
//$this.src = this.src의 크기로 인해 //잘못된 크기가 얻어집니다.
processImg.call ($this);
img .onload=function(){};
}
}
//이미지 크기 계산
function processImg(){
//if( settings.height===0|| settings.width ===0) return;
var m = this.height-settings.height;
var n = this.width - settings.width; if(m>n)
this.height = this.height>settings.height ? settings.height :
this.height;
else
this.width = this.width >settings. 너비 ? settings.width :
this.width;
$(this).next(".loadding").remove()
$(this).show()
return $(images).each( function(){
preLoad(this);
})
}
})(jQuery)


효과는 다음과 같습니다:
성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.