자바스크립트에서 이미지 지연 로딩을 구현하는 방법 요약(3가지 방법)_javascript 기술
- WBOY원래의
- 2016-05-16 15:42:041137검색
어떤 대형 웹사이트를 보니, 페이지에 사진이 많은 경우 해당 행으로 스크롤하면 바로 현재 행의 사진이 로드되면서 보이는 영역의 사진만 페이지가 열리게 됩니다. 다른 숨겨진 사진은 로드되지 않으므로 페이지 로드 속도가 빨라집니다. 페이지가 긴 경우 이 솔루션이 더 좋습니다. 원칙은 다음과 같습니다. 페이지의 표시 영역 아래에 있는 이미지는 사용자가 이미지 위치로 스크롤한 후 로드될 때까지 로드되지 않습니다. 이렇게 하면 어떤 이점이 있나요? ——페이지에 여러 화면의 콘텐츠가 있는 경우 사용자는 처음 몇 화면의 콘텐츠만 볼 수 있습니다. 이러한 방식으로 사용자가 봐야 하는 이미지만 로드하고 이로 인한 부하를 줄일 수 있습니다. 서버는 사용자의 브라우저에 이미지 파일을 보냅니다. 다음은 세 단계입니다. 이 방법은 이미지 지연 로드를 구현하는 js를 소개합니다.
지연된 이미지 로딩 방법 1의 JS 구현:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>lazyImage2.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css" mce_href="styles.css">-->
</head>
<body style="text-align:center" mce_style="text-align:center">
<p> </p><p> </p><p> </p><p> </p><p> </p>
<div style="height:1290px;width:800px;border:1px;background:gray;"></div>
<div style="height:150px;width:800px;border:1px;background:green;"></div>
<img class="lazy" src="images/sprite.gif" mce_src="images/sprite.gif" alt="images/lazyloadImg.jpg" />
<script type="text/javascript"><!--
var temp = -1;//用来判断是否是向下滚动（向上滚动就不需要判断延迟加载图片了）
window.onscroll = function() {
var imgElements = document.getElementsByTagName("img");
var lazyImgArr = new Array();
var j = 0;
for(var i=0; i<imgElements.length; i++) {
if(imgElements[i].className == "lazy"){
lazyImgArr[j++] = imgElements[i];
}
}
var scrollHeight = document.body.scrollTop;//滚动的高度
var bodyHeight = document.body.offsetHeight;//body（页面）可见区域的总高度
if(temp < scrollHeight) {//为true表示是向下滚动，否则是向上滚动，不需要执行动作。
for(var k=0; k<lazyImgArr.length; k++) {
var imgTop = lazyImgArr[k].offsetTop;//1305（图片纵坐标）
if((imgTop - scrollHeight) <= bodyHeight) {
lazyImgArr[k].src = lazyImgArr[k].alt;
lazyImgArr[k].className = "notlazy"
}
}
temp = scrollHeight;
}
};
// --></script>
</body>
</html>
웹페이지 이미지 지연 로딩을 구현하는 JS 방법:
코드를 게시하기 전에 이미지 지연 로딩을 구현하는 js의 원리를 알려드리겠습니다.
구현 원칙:
지연 로딩이 필요한 모든 이미지를 다음 형식으로 변경하세요.
<img lazy_src="图片路径" border="0"/>
그런 다음 페이지가 로드되면lazy_src를 사용하여 모든 이미지를 배열에 저장하고 스크롤할 때 표시되는 영역의 상단을 계산한 다음 지연 로드된 이미지의 상단을 현재 표시 영역보다 작게 만듭니다(예: image 가시 영역에 나타나는 이미지의 src 값은lazy_src로 대체됩니다(이미지 로드):
JS 코드:
lazyLoad = (function() {
var map_element = {};
var element_obj = [];
var download_count = 0;
var last_offset = -1;
var doc_body;
var doc_element;
var lazy_load_tag;
function initVar(tags) {
doc_body = document.body;
doc_element = document.compatMode == 'BackCompat' ? doc_body : document.documentElement;
lazy_load_tag = tags || ["img", "iframe"];
};
function initElementMap() {
var all_element = [];
//从所有相关元素中找出需要延时加载的元素
for (var i = 0,
len = lazy_load_tag.length; i < len; i++) {
var el = document.getElementsByTagName(lazy_load_tag[i]);
for (var j = 0,
len2 = el.length; j < len2; j++) {
if (typeof (el[j]) == "object" && el[j].getAttribute("lazy_src")) {
element_obj.push(all_element[key]);
}
}
}
for (var i = 0,
len = element_obj.length; i < len; i++) {
var o_img = element_obj[i];
var t_index = getAbsoluteTop(o_img); //得到图片相对document的距上距离
if (map_element[t_index]) {
map_element[t_index].push(i);
} else {
//按距上距离保存一个队列
var t_array = [];
t_array[0] = i;
map_element[t_index] = t_array;
download_count++; //需要延时加载的图片数量
}
}
};
function initDownloadListen() {
if (!download_count) return;
var offset = (window.MessageEvent && !document.getBoxObjectFor) ? doc_body.scrollTop : doc_element.scrollTop;
//可视化区域的offtset=document的高+
var visio_offset = offset + doc_element.clientHeight;
if (last_offset == visio_offset) {
setTimeout(initDownloadListen, 200);
return;
}
last_offset = visio_offset;
var visio_height = doc_element.clientHeight;
var img_show_height = visio_height + offset;
for (var key in map_element) {
if (img_show_height > key) {
var t_o = map_element[key];
var img_vl = t_o.length;
for (var l = 0; l < img_vl; l++) {
element_obj[t_o[l]].src = element_obj[t_o[l]].getAttribute("lazy_src");
}
delete map_element[key];
download_count--;
}
}
setTimeout(initDownloadListen, 200);
};
function getAbsoluteTop(element) {
if (arguments.length != 1 || element == null) {
return null;
}
var offsetTop = element.offsetTop;
while (element = element.offsetParent) {
offsetTop += element.offsetTop;
}
return offsetTop;
}
function init(tags) {
initVar(tags);
initElementMap();
initDownloadListen();
};
return {
init: init
}
})();
사용방법: 페이지 로딩을 지연시켜야 하는 이미지의 src를 lazy_src로 변경한 뒤, 위 js를 body 끝에 넣고 를 호출하세요. lazyLoad.init();
예상하려면 Firebug를 사용하여 이미지 로딩이 지연되는지 확인할 수 있습니다.
또한:
페이지에 콘텐츠 전환이 포함된 열이 있는 경우 전환 시 콘텐츠의 이미지가 표시되지 않을 수 있습니다. 해결 방법은 다음과 같이 콘텐츠 중에 이미지를 별도로 로드하는 것입니다.
///切换内容的代码…
chlid.find("img[init_src]").each(function(){
$(this).attr("src",$(this).attr("init_src"));
$(this).removeAttr("init_src");
});
이미지 지연 로드 방법 3의 원래 js 구현:
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>通过原生js延迟加载图片</title>
<style type="text/css">
div{width:100px;height:100px;background:#F00;margin-bottom:30px}
</style>
</head>
<body>
<div><img data-url="http://www.pokemon.name/w/image/Sprites/PDW/001.png
" src="a.gif" /></div>
<div><img data-url="http://www.pokemon.name/w/image/Sprites/PDW/002.png
" src="a.gif" /></div>
<div><img data-url="http://www.pokemon.name/w/image/Sprites/PDW/003.png
" src="a.gif" /></div>
<div><img data-url="http://www.pokemon.name/w/image/Sprites/PDW/004.png
" src="a.gif" /></div>
</body>
//以上图片测试时可用复制多点
<script type="text/javascript">
(function(){
//common
function tagName(tagName){
return document.getElementsByTagName(tagName);
}
function $(id){
return document.getElementById(id);
}
function addEvent(obj,type,func){
if(obj.addEventListener){
obj.addEventListener(type,func,false);
}else if(obj.attachEvent){
obj.attachEvent('on'+type,func);
}
}
//这里可以按照需要配置些参数
var v={
eleGroup:null,
eleTop:null,
eleHeight:null,
screenHeight:null,
visibleHeight:null,
scrollHeight:null,
scrolloverHeight:null,
limitHeight:null
}
//对数据进行初始化
function init(element){
v.eleGroup=tagName(element)
screenHeight=document.documentElement.clientHeight;
scrolloverHeight=document.body.scrollTop;
for(var i=0,j=v.eleGroup.length;i<j;i++){
if(v.eleGroup[i].offsetTop<=screenHeight && v.eleGroup[i].getAttribute('data-url')){
v.eleGroup[i].setAttribute('src',v.eleGroup[i].getAttribute('data-url'));
v.eleGroup[i].removeAttribute('data-url')
}
}
}
function lazyLoad(){
if(document.body.scrollTop == 0){
limitHeight=document.documentElement.scrollTop+document.documentElement.clientHeight;
}else{
limitHeight=document.body.scrollTop+document.documentElement.clientHeight;
}
for(var i=0,j=v.eleGroup.length;i<j;i++){
if(v.eleGroup[i].offsetTop<=limitHeight && v.eleGroup[i].getAttribute('data-url')){
v.eleGroup[i].src=v.eleGroup[i].getAttribute('data-url');
v.eleGroup[i].removeAttribute('data-url')
}
}
}
init('img')
addEvent(window,'scroll',lazyLoad);
})()
</script>
</html>
위 콘텐츠에서는 세 가지 방법을 통해 이미지 지연 로딩을 구현하는 js를 소개합니다.
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.