图片的javascript延时加载
时间:2022-04-23
本文章向大家介绍图片的javascript延时加载,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
在页面很长(超过3屏)且图片又很多时,默认情况下浏览器会加载所有图片,有可能导致第二屏的图片显示出来了,但第一屏的图片还在加载,这种情况最适合用"javascript延时加载"来改善用户体验.
原理:
1.根据图片元素距页面顶部的距离,判断图片自身在第几屏
2.所有图片元素的src值先不设置,改而用其它自定义属性,比如src写成lazy_src(这样浏览器就不会主动加载图片)
3.根据1的判断,如果轮到自己登场了(即到顶部的距离变化了,比如用户拉动滚动条了),则将lazy_src值赋值为src,这样浏览器就开始加载了.
代码:(收集于网上)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>js延时加载</title>
<script type="text/javascript">
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;
//判断是否为IE的"怪异模式"
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(el[j]);
}
}
}
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);//每隔0.2秒检测一次,这玩意儿感觉有些耗资源的
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
}
})();
</script>
<style type="text/css">
img{height:800px}
</style>
</head>
<body>
<div>
<img lazy_src="http://pic.vlike.com/girl/UploadFiles_9401/201005/13/2010051307474029890_big.jpg" /><br/>
<img lazy_src="http://pic.vlike.com/girl/UploadFiles_9401/201005/13/2010051307474372951_big.jpg" /><br/>
<img lazy_src="http://pic.vlike.com/girl/UploadFiles_9401/201005/06/2010050616595471474_big.jpg" /><br/>
<img lazy_src="http://pic.vlike.com/girl/UploadFiles_9401/201005/13/2010051307474693772_big.jpg" /><br/>
<img lazy_src="http://pic.vlike.com/girl/UploadFiles_9401/201005/05/2010050511370456961_big.jpg" /><br/>
<img lazy_src="http://pic.vlike.com/girl/UploadFiles_9401/201005/13/2010051311000442310_big.jpg" /><br/>
</div>
<script type="text/javascript">
lazyLoad.init();
</script>
</body>
</html>
注意事项:图片最好都用样式定义高度,否则图片的高度默认为0,就上面的例子来讲,所有img标签都挤在一起,全部在第一屏,导致程序认为它们都应该加载,就看不到效果了.
另外这种方式有一个致命的缺点:如果浏览器禁用了javascript,将会失效!所以使用前请先考虑清楚,或者在页面上加一些提示(类似:“您的浏览器不支持javascript,页面显示可能不正常”之类)
附:firefox上快速禁用和启用javascript的方法
如上图所示,在firefox地址栏里输入about:config,找到javascript:enabled,双击可切换true或false(即:启用或禁用)
当然,园子里的高手还有一篇更强大的ImagesLazyLoad 图片延迟加载效果 推荐给想深入研究的朋友们看看。
此外,jQuery也一个专门实现延时加载的插件jQuery.lazyload,也很方便。
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 4. Validator校验器的五大核心组件,一个都不能少
- leetcode之罗马数字转整数
- B站签到-云函数
- echarts常用功能封装|抽象为mixin
- TCB系列学习文章——云开发的云托管(八)
- TCB系列学习文章——云开发登录篇(九)
- 字符串操作的全面总结
- C 语言 C++ 中 assert 的用法
- kubernetes之StatefulSet控制器
- 如何使用 S3CMD 访问 COS 服务
- 利用STS临时密钥服务快速搭建直传页面的实践
- codeforces 1436C(二分+数学)
- WAF案例:为什么curl可以wget不行?
- React进阶(4)-拆分Redux-将store,Reducer,action,actionTypes独立管理
- React进阶(5)-分离容器组件,UI组件(无状态组件)