图片的javascript延时加载

最新推荐文章于 2024-07-24 20:51:04 发布
最新推荐文章于 2024-07-24 20:51:04 发布
阅读量368 收藏
点赞数
分类专栏： 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，页面显示可能不正常”之类)


滇北小生
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript图片延迟加载实现方法及思路
10-23
主要介绍了javascript图片延迟加载实现方法及思路，有时我们需要用懒加载，也就是延迟加载图片的方式，来提高网站的亲和力,需要的朋友可以参考下
纯javascript实现图片延时加载方法
10-23
看到一篇博客说土豆网的图片是延迟加载的。原理是这样：页面可见区域以下的图片先不加载，等到用户向下滚动到图片位置时，再进行加载。这样做的好处是当页面有好几屏内容时，这样我们就可以只加载用户需要看的图片，...
图片延时加载
qq_36162895的博客
09-04 251
// 图片延时加载(调用lazyLoad.init([html标签])对标记为需要延时加载的图片进行延时加载)  lazyLoad = (function () {  // 存储页面延时加载元素的对象{}  var map_element = {};  // 保存延时加载的元素  var element_obj = [];  //需要延时加载的图片数量  var download_c
Javascript实现图片延迟加载
qq_34306228的博客
03-08 893
所以，对于图片过多的页面，为了加速页面加载速度，所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载， 等到滚动到可视区域后再去加载。对页面加载速度影响最大的就是图片，一张普通的图片可以达到几M的大小，而代码也许就只有几十KB。当页面图片很多时，页面的加载速度缓慢，几S钟内页面没有加载完成，也许会失去很多的用户。// 页面窗口改变 / 视窗大小改变时。// 1. 做纵向的可见判断。// 3. 防止图片重复加载。// 加载需要懒加载的图片。// 判断图片是否可见。// 横纵方向改变时。
html页面图片延迟加载,JavaScript实现图片延迟加载
weixin_33561910的博客
06-03 682
在日常的抓取工作当中，经常看到网站为了减轻网页加载所需资源对图片等资源进行延迟加载。那什么样的页面需要用到延迟加载呢？比如我们打开一个图片网站，一个页面有很多图片，这个时候我们就用的到延迟加载；比如我们写一篇很长的技术博客的时候也需要配一些图，这里也可以用到延迟加载。那什么是延迟加载呢？简单的说是一种对网页的性能优化，加载一个很多图片的网页不需要先把全部图片加载出来，而是只加载可视区域的图片即可，...
js实现图片延迟加载
duo1207的博客
08-09 1101
/* * 思路： * 1.获取可视窗口高（clientHeight）、各个图片的绝对距离（getPub函数）以及滚动进去的高（scrollTop) * 2.滚动进去的高（scrollTop) + 视窗口高（clientHeight）&gt;=各个图片的绝对距离 * 3.若满足第2步的条件，就让自定义属性的内容 赋值给img的src属性； * */ /*获取当前元素到html的距离*/ func...
php延迟加载图片,Html图片延迟加载，图片延时加载库（JavaScript版本）
weixin_32870457的博客
03-11 63
【温馨提示】源码包解压密码：www.youhutong.com简介：和 Lazy Load 一样，它也是一个用于图像延迟加载 JavaScript。不同的是 Lazy Load 是基于 jQuery 的插件，而这个不依赖于 jQuery 或其他 JavaScript 库，可独立使用。并且非常小巧，压缩后不足 1KB。兼容：使用了 HTML5 的 date 属性，并且需要获取该属性的值，所以它并不兼...
javascript图片延迟加载
哈特中尉
08-14 188
1.jquery_lazyload github地址：https://github.com/tuupola/jquery_lazyload/ 教程:http://code.ciaoca.com/jquery/lazyload/ 2.Echo.js 主页：http://www.jq22.com/jquery-info660 demo:http://www.jq22.com/yanshi66...
Javascript延迟加载
警警的博客
07-24 555
JS（JavaScript）延迟加载是一种优化网页加载速度的技术，它允许在页面的主要内容加载完成后，再加载和执行JavaScript脚本。
图片延迟加载
每天都要努力学习哦~~
01-25 3365
前言 图片延迟加载:真实项目中非常重要的一个性能优化手段; 在没有加载图片之前,图片区域用默认的背景图(背景色)占位即可 首屏:先加载首屏的其他数据(内容,样式,文本等),等待其它数据加载完成,再去加载真实的图片 其他屏:当我们滚动到指定区域(一露面,出来一半,完全出现在屏幕中),在去加载真实图片 //在浏览器滚动条滚动(页面滚动)过程中,等待图片完全出现在可视窗口内的时候,我们加载真实图片 "这是非首屏图片的处理步骤"-->计算出盒子底边距离body(a)的距离 和 浏览器底边距离bo.
使用jquery插件实现图片延迟加载技术
xxpr_ybgg的博客
11-12 295
滚动页面的时候, Lazy Load 会循环为加载的图片. 在循环中检测图片是否在可视区域内. 默认情况下在找到第一张不在可见区域的图片时停止循环. 图片被认为是流式分布的, 图片在页面中的次序和 HTML 代码中次序相同. 但是在一些布局中, 这样的假设是不成立的. 不过你可以通过 failurelimit 选项来控制加载行为.插件提供了 threshold 选项, 可以通过设置临界值 (触发加载处到图片的距离) 来控制图片的加载. 默认值为 0 (到达图片边界的时候加载).
vue3.0 实现图片延迟加载 自定义属性
吴冬雪的博客
08-05 681
根目录下创建文件 directive.js。main.js中进行使用。使用 Home.js。
原生javaScript实现图片延时加载的方法
10-25
主要介绍了原生javaScript实现图片延时加载的方法,无需通过载入jQuery脚本即可实现图片的延时加载效果,是非常实用的技巧,需要的朋友可以参考下
jquery图片延迟加载
06-20
为了解决这个问题，开发人员引入了“图片延迟加载”技术，jQuery作为一款广泛使用的JavaScript库，提供了实现这一功能的强大工具。本文将深入探讨jQuery图片延迟加载的概念、优势以及实现方法。 **一、什么是图片...
原生javascript实现图片滚动、延时加载功能
10-24
主要介绍了使用原生javascript实现图片滚动、延时加载功能，思路与方法均分享给大家，希望对大家能有所帮助。
LABVIEW TCP通讯调试助手
07-29
本文接收如何利用Labview的TCP通讯工具做通讯，这里手把手教各位做一个简单的TCP通讯调试助手，可以局域网互相聊天哦！ 具体介绍见下面连接：https://download.csdn.net/download/weixin_41671635/89595897
机器学习与人工智能教程
07-29
机器学习与人工智能教程
零基础入门转录组数据分析-WGCNA(加权基因共表达网络) 配套资源
最新发布
07-29
零基础入门转录组数据分析-WGCNA(加权基因共表达网络) https://blog.csdn.net/weixin_49878699/article/details/140304846 教程配套的原始数据+代码+处理好的数据文件
【创新未发表】Matlab实现引力搜索优化算法GSA-Kmean-Transformer-BiLSTM负荷预测算法研究.rar
07-29
1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍：某大厂资深算法工程师，从事Matlab算法仿真工作10年；擅长智能优化算法、神经网络预测、信号处理、元胞自动机等多种领域的算法仿真实验，更多仿真源码、数据集定制私信+。 替换数据可以直接使用，注释清楚，适合新手
JavaScript延迟加载框架性能对比测试
本文主要探讨了不同移动延迟加载框架在性能方面的比较，通过测试Controljs、 LABjs、 Seajs、 Injs以及Dojs这五种JavaScript延迟加载库，以分析它们在加载和执行效率上的差异。测试场景包括了常规的脚本引入方式与...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值