大家如果使用firebug去查看的话就会发现,当你滚动到相应的行时,当前行的图片才即时加载的,这样子的话页面在打开只加可视区域的图片,而其它隐藏的图片则不加载,一定程序上加快了页
大家如果使用firebug去查看的话就会发现,当你滚动到相应的行时,当前行的图片才即时加载的,这样子的话页面在打开只加可视区域的图片,而其它隐藏的图片则不加载,一定程序上加快了页面加载的速度,对于比较长的页面来说,这个方案是比较好的。
实现原理
把所有需要延时加载的图片改成如下的格式:
-
<
img
lazy_src
=
"图片路径"
border
=
"0"
/>
然后在页面加载时,把所有使用了lazy_src的图片都保存到数组里,然后在滚动时计算可视区域的top,然后把延时加载的图片中top小于当前可视区域(即图片出现在可视区域内)的图片的src的值用lazy_src的来替换(加载图片)
代码
-
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);
-
-
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;
-
-
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"
);
-
-
});
分享到:
相关推荐
首先,图片延时加载可以节省我们带宽,获取到更好的用户体验,尤其对于图片多的站点,这一点显得至关重要,下面就跟大家探讨一下图片延时加载原理和实现代码。 图片延时加载原理 图片延时加载原理是在html里面的图片...
本文为大家分享了js实现延迟加载思想和首屏延迟加载的具体代码,供大家参考,具体内容如下 作用:保证页面打开的速度(3s之内如果首页打不开就已经算是死亡页面了) 原理: 1)、对于首屏内容中的图片:首先给对应的...
对页面加载速度影响最大的就是图片,一张普通的图片可以达到几M的大小,而代码也许就只有几十KB。当页面图片很多时,页面的加载速度缓慢,几S钟内页面没有加载完成,也许会失去很多的用户。 所以,对于图片过多的...
原理和过程 1.页面滚动加载事件 2.获取元素在页面里的top值 根据滚动条的位置 判断何时显示图片 3.获取元素集合 加载过的...原生Js页面滚动延迟加载图片</title> <style type=”text/css”> *{margin: 0
给泡泡网开发控件,本来想直接用JQ的延迟控件,但是JQ的延迟控件只是加快了加载速度,没有省带宽,也就是说JQ的懒加载并没有实际提升图片的传输量,本人讲不明白,还是请各位把代码DOWN了以后验收 {ht
如果一个网页很长并且有很多图片的话,下载图片就需要很多时间,那么就会影响整个网页的加载速度,而这款延迟加载插件,会通过你的滚动情况来加载你需要看的图片,然后它才会从后台请求下载图片,最后显示出来。...
先说一下原理,在我们的页面上先预留一些占位符,为了不影响页面内容的加载,我们在页面的底部引入JS处理,逐个把占位符替换成相应的广告。 下面我们看具体的实现步骤: 一、在页面上放置占位符,其实就是一个span...
《超实用的jQuery代码段》从jQuery框架的使用原理与应用场景出发,对最实用的jQuery代码段进行了全方位的介绍和演示。全书分为11章,包含网页效果、DOM元素与属性、HTML事件、CSS样式、用户输入自动完成、拖放、图形...
延迟脚本执行,相当于将script标签放入页面body标签的底部,js脚本会在document的DOMContentLoaded之前执行。除IE和较新版本的Firefox外,其他浏览器并未支持。 language: 已废弃。大部分浏览器会忽略该值。 src: 可...
使其成为圆形,再给该div3px的边框并设为透明,然后在单独设置上边框为白色,用::before,::after伪类absolute定位并进行同样设置,不同之处是依次增大留出的间隙,以及动画执行时间变长和设置延迟,这样就能形成...
util实现Java图片水印添加功能,有添加图片水印和文字水印,可以设置水印位置,透明度、设置对线段锯齿状边缘处理、水印图片的路径,水印一般格式是gif,png,这种图片可以设置透明度、水印旋转等,可以参考代码加以...
博客中心是博客的核心,分页和轮滑加载均实现,用Redisson来实现分布式锁控制文章 搜索引擎中心:文章提示信息的增删改查,分页,高亮模糊排序查询 用户的消息中心:websocket聊天与用户的所有个人消息 用户的个人...
浅谈Angular的12个经典...如何在Angular 2中启用延迟加载?7. 在Angular 2应用中,我们应该注意哪些安全威胁?8. 如何优化Angular 2应用程序来获得更好的性能?9. 如何实现不出现编辑器警告的自定义类型?10. 什么是S
util实现Java图片水印添加功能,有添加图片水印和文字水印,可以设置水印位置,透明度、设置对线段锯齿状边缘处理、水印图片的路径,水印一般格式是gif,png,这种图片可以设置透明度、水印旋转等,可以参考代码加以...
3.10 综合案例分析—数据删除和图片预览在项目中的应用/75 3.10.1 需求分析/75 3.10.2 效果界面/75 3.10.3 功能实现/77 3.10.4 代码分析/80 3.11 本章小结/81 第4章 jQuery中的事件与应用/82 4.1 事件机制/...
它具有强大的事务支持, 关联关系, 预读和延迟加载,读取复制等功能,完美代替了手写SQL的困扰。 Express基于 Node.js 平台,快速、开放、极简的 Web 开发框架。 MySQL是一种关系型数据库管理系统,关系数据库将数据...
react-lazyimg-component v1.0.0 是使用 、、完全重构的,React 图片懒加载小组件。并且组件参考了 动画实现原理 ,引入全新的渐进性自然过渡效果(如下图 方案 B 所示)。 Demo 效果 singsong: Demo 中第一张图片未...
code说明:这个仓库是我自己平常写...imgDelay.js// 图片和广告延迟加载,一个门户网站有用到过,临时写的,有优化空间,以后有时间再优化吧。reg.run.js// 注册用的表单验证,没什么特别的,优化下估计是个不错的工具
5.6.1 需求分析 5.6.2 效果界面 5.6.3 功能实现 5.6.4 代码分析 5.7 本章小结 第6章 ajax在jquery中的应用 6.1 加载异步数据 6.1.1 传统的javascript方法 6.1.2 jquery中的load()方法 6.1.3 ...