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

JavaScript 연구 노트 중 하나: jQuery 작성 방법, 이미지 크기 조정 및 사전 로드

예전에는 JavaScript를 사용할 때 항상 페이지에 몇 가지 함수를 작성했으며 기본적으로 함수의 캡슐화 및 재사용을 고려하지 않았습니다. 최근 이 프로젝트는 이와 관련하여 높은 요구 사항을 가질 수 있으므로 jQuery와 유사한 캡슐화를 연구했습니다.

여기서 이미지 크기 조정 및 사전 로드 효과를 시험해 보고 유사한 JavaScript 코드를 작성해 보겠습니다.

이미지 크기 조정 및 사전 로드의 효과는 다음과 같습니다(사전 로드 효과가 명확하지 않은 경우도 있음).

주요 JS 코드는 다음과 같습니다.

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

(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

코드는 다음과 같습니다.

$(document).ready(function() { $$.imgResize({ imgId: ".viewArea img", 높이:160, 너비:270, 로딩: "http://www.jb51.net/images/2012/155618/2012062710243954.gif" }) }); 🎜> 마지막으로 간단한 소스코드 첨부합니다:

jsDemo_jb51.rar