JavaScript 연구 노트 1: jQuery 작성 방법, 이미지 크기 조정 및 preloading_jquery

(function() {
var yQuery = (function() {
var yQuery = function () {
return yQuery.fn.init();
}
yQuery.fn = yQuery.prototype = {
init: function() {
return this;
},
//이미지 비례 스케일링 및 사전 로드 방법 선언이 있지만 이렇게 작성하는 것은 매우 어색한 것 같습니다(return new imgResizeBox(e)).
imgResize: function(e) {
return new imgResizeBox( e);
}
}
//이미지 이미지 처리
var imgResizeBox = function(e) {
//이미지 매개변수
setting = {
imgId: " ", //.viewArea img와 같은 이미지 컨테이너의 ID
height: 0,
width: 0,
loading: "images/ lightbox-ico-loading.gif"
};
$.extend(setting, e, settings); //매개변수 교체
var Images = $(setting.imgId); //모든 이미지 가져오기
$(images).hide(); //숨기기
var loading = new Image(); //이미지 미리 로드
loading.className = "loading"
setting.loading ;
$(images).after(loading);
//함수 미리 로드
var perLoading = function($this) {
var img = new Image(); = $this.src;
if (img.complete) {
computeImg.call($this)
return
}; >computeImg.call($this);
img .onload = function() { };

};
//사진 표시 기능
var 계산Img = function() {
var m = this.height - 설정.높이
var n = this.width - 설정.폭
if (m > n)
this .height = this.height > 설정.높이 ? 설정 .height : this.height
this.width = this.width > 설정.너비
$(this).next(".loading") .remove();
$(this).show()
}//루프에서 사전 로드 함수 호출
return $(images).each(function() {
perLoading(this);
})
}
return yQuery
})(); = window.$$ = yQuery();
}) ();


호출 코드는 다음과 같습니다.




복사 code