jquery control_javascript 기술을 넘어서는 네트워크 이미지 지연 로딩 구현 코드

Taobao, QQ, Dangdang, Amazon 및 기타 웹사이트는 모두 이러한 효과가 있습니다. 섹션별로 이미지를 로드하는 것이 원칙인데, 이는 대역폭을 절약하기 위해 주로 대규모 웹사이트에서 사용됩니다. 그러나 그들이 제공하는 것들은 압축되어 있고 일부는 혼란스럽습니다. require 일부 Yahoo 라이브러리를 기반으로 하면 JQ의 제어가 충분히 명확하지만 여전히 네트워크 대역폭 절약 효과를 얻지 못하므로 JQ 지연 로딩 제어를 일부 개선했습니다. 개선점은 호출이 쉽고, 프로젝트에 많은 변경이 필요하지 않으며, JS 파일이 크지 않다는 점입니다. (파오파오닷컴 작업자! 재인쇄시 출처표시 부탁드립니다. 감사합니다)
1. 파오부닷컴 컨트롤 개발을 위해 원래는 JQ의 딜레이 컨트롤을 직접 사용하려고 했으나 JQ 딜레이 컨트롤은 로딩 속도만 빨라지게 할 뿐입니다. 즉, JQ의 지연 로딩은 실제로 이미지 전송량을 늘리지 않습니다. 코드를 다운한 후 수락하시기 바랍니다.
　{http:/ /www.appelsiini.net/projects/lazyload 컨트롤의 원본 JQ 다운로드 주소입니다.}
2. 이 컨트롤의 사용법에 주의하세요.
1. JQ 인용:

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

JQ가 없으면 가세요 online DOWN
2 .아래 게시된 코드를 JS 파일로 저장

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

추가 참고
3. 문을 호출하고 JQ를 터치해 보세요. 마찬가지로 페이지 하단의

을 호출할 수도 있습니다. 태그 앞에 코드를 복사하세요.

또는 이렇게 호출하세요

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

물론 해야 합니다. 먼저 blue-loading.gif 사진이 있고 그 다음에는 이미지 폴더 아래에 호출됩니다.
효과 후 표시 효과를 설정합니다.
4. 프론트 데스크 SRC의 IMG 태그에 넣지 말고 원본 태그를 넣어주세요. 예를 들어
이렇게 하면 페이지를 열 때 이미지가 로드되지 않습니다. 이는 가장 중요한 점이기도 하며 프로젝트의 배경 코드에서 변경해야 하는 유일한 사항입니다.
코드가 있고 진실이 있습니다
코드

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

(function($) {
$.fn.lazyload = function(options) {
var settings = {
임계값: 0,
failurelimit: 0,
이벤트: "스크롤",
효과: "표시",//默认效果为show
컨테이너: 창
}
if (옵션) {
$.extend(settings, options );
}
var elements = this;
if ("scroll" == settings.event) {
$(settings.container).bind("scroll", function(event) {
var counter = 0;
elements.each(function() {
if ($.abovethetop(this, 설정) ||
$.leftofbegin(this, 설정)
) {
self.loaded = false;
}
else if (!$.belowthefold(this, 설정) &&
!$.rightoffold(this, 설정)) {
self.loaded = false;
$(this).trigger("appear");
}
else {
self.loaded = true
if (counter > settings.failurelimit) {
return false;
}
}
});
var temp = $.grep(elements, function(element) {
return !element.loaded;
});
elements = $(temp);
});
}
/**Sanchao Control--작업**/
this.each(function() {
var self = this;
if (settings.placeholder) {
$(self).attr("src", settings.placeholder);
}
$(self).one("appear", function() {
if (!this.loaded) {
$("")
.bind("load", function() {
$(self)
.hide()
.attr("src", $(self).attr("original"))
[설정.효과](설정.효과속도);
self.loaded = true;
})
.attr("src", $(self).attr("original")); >}
});
if ("scroll" != settings.event) {
$(self).bind(settings.event, function(event) {
if (!self.loaded) {
$( self).trigger("나타남")
}
});
}
});
$(settings.container).trigger(settings.event);
이것을 돌려주세요;
};
$.belowthefold = function(요소, 설정) {
if (settings.container === 정의되지 않음 || settings.container === window) {
varfold = $(window).height( ) $(window).scrollTop();
} else {
varfold = $(settings.container).offset().top $(settings.container).height();
}
접기 반환 <= $(element).offset().top - settings.threshold;
};
$.rightoffold = function(요소, 설정) {
if (settings.container === 정의되지 않음 || settings.container === window) {
varfold = $(window).width( ) $(window).scrollLeft();
} else {
varfold = $(settings.container).offset().left $(settings.container).width();
}
접기 반환 <= $(element).offset().left - settings.threshold;
};
$.abovethetop = function(요소, 설정) {
if (settings.container === 정의되지 않음 || settings.container === window) {
varfold = $(window).scrollTop( );
} else {
varfold = $(settings.container).offset().top;
}
접기 반환 >= $(element).offset().top settings.threshold $(element).height();
};
$.leftofbegin = function(element, settings) {
if (settings.container === 정의되지 않음 || settings.container === window) {
varfold = $(window).scrollLeft( );
} else {
varfold = $(settings.container).offset().left;
}
접기 반환 >= $(element).offset().left settings.threshold $(element).width();
};
$.extend($.expr[':'], {
"below-the-fold": "$.belowthefold(a, {임계값: 0, 컨테이너: 창})",
"접기 위": "!$.belowthefold(a, {임계값: 0, 컨테이너: 창})",
"접기 오른쪽": "$.rightoffold(a, {임계값: 0 , 컨테이너: 창})",
"왼쪽 접기": "!$.rightoffold(a, {임계값: 0, 컨테이너: 창})"
});
})(jQuery);
/**


내가 어디에서 최적화했는지 사람들이 이해하기 어려울 것 같습니다.
먼저 JQ 지연 로딩 원리를 명확하게 적어보세요.
JQ가 먼저 페이지에 표시할 이미지가 10,000개 있다고 가정합니다. 그러면 페이지가 빠르게 10장의 사진을 로드합니다.
9990장의 사진 로딩 시간을 저장합니다
나의 제어 원칙:
먼저 한 번에 10장의 사진을 클라이언트에게 보내고, 10장의 사진을 로드합니다.
9990장의 사진 로딩 시간을 절약하고
이때 절약된 네트워크 트래픽은 엄청납니다.
대규모 웹사이트의 경우 이렇게 절약된 대역폭을 사용할 수 없게 되었습니다
. 즉, 내 컨트롤은 처음으로 빈 값이 포함된 1W ​​IMG 태그만 로드했는데, 이는 단지 작은 문자열일 뿐입니다!
(IMG 태그의 원본 속성을 처리하지 않고 서버 이미지를 클라이언트에 다운로드하는 것은 불가능합니다!
단, SRC 태그 이미지를 사용하면 반드시 처음에 로드됩니다. 이때, 페이지 로딩 속도만 작업할 수 있습니다.
믿을 수 없다면 Firefox를 사용하여 이미지 요청을 볼 수 있습니다. JQ 컨트롤은 확실히 한 번에 전송을 완료합니다! )
그런데 제가 JQ를 테스트하는 방법을 알려드리겠습니다
http://www.appelsiini.net/projects/lazyload/enabled.html JQ 컨트롤의 테스트 주소입니다. 파이어폭스로 파이어버그를 연 뒤 모니터 이미지 전송량을 보면 6개의 이미지가 열리자마자 모두 로딩되는 상황이고, 다시 스크롤바를 드래그하면 아래 그림과 같이 로딩 기능이 간단하게 실행된다. 위 사진:

출처 http://www.cnblogs.com/jacd/archive/2010/03/25/1696085.html