> 웹 프론트엔드 > JS 튜토리얼 > JavaScript 연구 노트 1: jQuery 작성 방법, 이미지 크기 조정 및 preloading_jquery

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

WBOY
풀어 주다: 2016-05-16 17:52:20
원래의
1273명이 탐색했습니다.

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


코드는 다음과 같습니다.jsDemo_jb51.rar
관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿