js图片延迟加载

最新推荐文章于 2023-11-02 19:08:46 发布
最新推荐文章于 2023-11-02 19:08:46 发布
阅读量673 收藏
点赞数
分类专栏： html JS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wzm112/article/details/8930895
版权
JS 同时被 2 个专栏收录
10 篇文章 0 订阅
订阅专栏
html
5 篇文章 0 订阅
订阅专栏

js 实现图片延迟加载


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>js图片延迟加载</title>
</head>
<body>
<table id="out1" style1="height:2450px;">
<tr>
<td><img src="img/load.gif" _src="http://demo.kesion.com/UploadFiles/2012/admin/20126185813100585.jpg" alt="" width="400px" height="400px" /> </td>
<td><img src="img/load.gif" _src="http://demo.kesion.com/UploadFiles/2012/admin/20126185813100585.jpg" alt="" width="400px" height="400px" /></td>
</tr>
<tr>
<td><img src="img/load.gif" _src="http://demo.kesion.com/UploadFiles/2012/admin/20126185813100585.jpg" alt="" width="400px" height="400px" /> </td>
<td><img src="img/load.gif" _src="http://demo.kesion.com/UploadFiles/2012/admin/20126185813100585.jpg" alt="" width="400px" height="400px" /></td>
</tr>
<tr>
<td><img src="img/load.gif" _src="http://demo.kesion.com/UploadFiles/2012/admin/20126185813100585.jpg" alt="" width="400px" height="400px" /> </td>
<td><img src="img/load.gif" _src="http://demo.kesion.com/UploadFiles/2012/admin/20126185813100585.jpg" alt="" width="400px" height="400px" /></td>
</tr>
<tr>
<td><img src="img/load.gif" _src="http://demo.kesion.com/UploadFiles/2012/admin/20126185813100585.jpg" alt="" width="400px" height="400px" /> </td>
<td><img src="img/load.gif" _src="http://demo.kesion.com/UploadFiles/2012/admin/20126185813100585.jpg" alt="" width="400px" height="400px" /></td>
</tr>
<tr>
<td><img src="img/load.gif" _src="http://demo.kesion.com/UploadFiles/2012/admin/20126185813100585.jpg" alt="" width="400px" height="400px" /> </td>
<td><img src="img/load.gif" _src="http://demo.kesion.com/UploadFiles/2012/admin/20126185813100585.jpg" alt="" width="400px" height="400px" /></td>
</tr>
<tr>
<td><img src="img/load.gif" _src="http://demo.kesion.com/UploadFiles/2012/admin/20126185813100585.jpg" alt="" width="400px" height="400px" /> </td>
<td><img src="img/load.gif" _src="http://demo.kesion.com/UploadFiles/2012/admin/20126185813100585.jpg" alt="" width="400px" height="400px" /></td>
</tr>
<tr>
<td><img src="img/load.gif" _src="http://demo.kesion.com/UploadFiles/2012/admin/20126185813100585.jpg" alt="" width="400px" height="400px" /> </td>
<td><img src="img/load.gif" _src="http://demo.kesion.com/UploadFiles/2012/admin/20126185813100585.jpg" alt="" width="400px" height="400px" /></td>
</tr>
<tr>
<td><img src="img/load.gif" _src="http://demo.kesion.com/UploadFiles/2012/admin/20126185813100585.jpg" alt="" width="400px" height="400px" /> </td>
<td><img src="img/load.gif" _src="http://demo.kesion.com/UploadFiles/2012/admin/20126185813100585.jpg" alt="" width="400px" height="400px" /></td>
</tr>
<tr>
<td><img src="img/load.gif" _src="http://demo.kesion.com/UploadFiles/2012/admin/20126185813100585.jpg" alt="" width="400px" height="400px" /> </td>
<td><img src="img/load.gif" _src="http://demo.kesion.com/UploadFiles/2012/admin/20126185813100585.jpg" alt="" width="400px" height="400px" /></td>
</tr>
<tr>
<td><img src="img/load.gif" _src="http://demo.kesion.com/UploadFiles/2012/admin/20126185813100585.jpg" alt="" width="400px" height="400px" /> </td>
<td><img src="img/load.gif" _src="http://demo.kesion.com/UploadFiles/2012/admin/20126185813100585.jpg" alt="" width="400px" height="400px" /></td>
</tr>
<tr>
<td><img src="img/load.gif" _src="http://demo.kesion.com/UploadFiles/2012/admin/20126185813100585.jpg" alt="" width="400px" height="400px" /> </td>
<td><img src="img/load.gif" _src="http://demo.kesion.com/UploadFiles/2012/admin/20126185813100585.jpg" alt="" width="400px" height="400px" /></td>
</tr>
<tr>
<td><img src="img/load.gif" _src="http://demo.kesion.com/UploadFiles/2012/admin/20126185813100585.jpg" alt="" width="400px" height="400px" /> </td>
<td><img src="img/load.gif" _src="http://demo.kesion.com/UploadFiles/2012/admin/20126185813100585.jpg" alt="" width="400px" height="400px" /></td>
</tr>
</table>
<table id="out2" style1="width:4883px">
<tr>
<td><img src="img/load.gif" _src="http://demo.kesion.com/UploadFiles/2012/admin/20126185813100585.jpg" alt="" width="400px" height="400px" /> </td>
<td><img src="img/load.gif" _src="http://demo.kesion.com/UploadFiles/2012/admin/20126185813100585.jpg" alt="" width="400px" height="400px" /></td>
</tr>
<tr>
<td><img src="img/load.gif" _src="http://demo.kesion.com/UploadFiles/2012/admin/20126185813100585.jpg" alt="" width="400px" height="400px" /> </td>
<td><img src="img/load.gif" _src="http://demo.kesion.com/UploadFiles/2012/admin/20126185813100585.jpg" alt="" width="400px" height="400px" /></td>
</tr>
<tr>
<td><img src="img/load.gif" _src="http://demo.kesion.com/UploadFiles/2012/admin/20126185813100585.jpg" alt="" width="400px" height="400px" /> </td>
<td><img src="img/load.gif" _src="http://demo.kesion.com/UploadFiles/2012/admin/20126185813100585.jpg" alt="" width="400px" height="400px" /></td>
</tr>
<tr>
<td><img src="img/load.gif" _src="http://demo.kesion.com/UploadFiles/2012/admin/20126185813100585.jpg" alt="" width="400px" height="400px" /> </td>
<td><img src="img/load.gif" _src="http://demo.kesion.com/UploadFiles/2012/admin/20126185813100585.jpg" alt="" width="400px" height="400px" /></td>
</tr>
<tr>
<td><img src="img/load.gif" _src="http://demo.kesion.com/UploadFiles/2012/admin/20126185813100585.jpg" alt="" width="400px" height="400px" /> </td>
<td><img src="img/load.gif" _src="http://demo.kesion.com/UploadFiles/2012/admin/20126185813100585.jpg" alt="" width="400px" height="400px" /></td>
</tr>
<tr>
<td><img src="img/load.gif" _src="http://demo.kesion.com/UploadFiles/2012/admin/20126185813100585.jpg" alt="" width="400px" height="400px" /> </td>
<td><img src="img/load.gif" _src="http://demo.kesion.com/UploadFiles/2012/admin/20126185813100585.jpg" alt="" width="400px" height="400px" /></td>
</tr>
<tr>
<td><img src="img/load.gif" _src="http://demo.kesion.com/UploadFiles/2012/admin/20126185813100585.jpg" alt="" width="400px" height="400px" /> </td>
<td><img src="img/load.gif" _src="http://demo.kesion.com/UploadFiles/2012/admin/20126185813100585.jpg" alt="" width="400px" height="400px" /></td>
</tr>
<tr>
<td><img src="img/load.gif" _src="http://demo.kesion.com/UploadFiles/2012/admin/20126185813100585.jpg" alt="" width="400px" height="400px" /> </td>
<td><img src="img/load.gif" _src="http://demo.kesion.com/UploadFiles/2012/admin/20126185813100585.jpg" alt="" width="400px" height="400px" /></td>
</tr>
<tr>
<td><img src="img/load.gif" _src="http://demo.kesion.com/UploadFiles/2012/admin/20126182393278906.jpg" alt="" width="400px" height="400px" /> </td>
<td><img src="img/load.gif" _src="http://demo.kesion.com/UploadFiles/2012/admin/20126182393278906.jpg" alt="" width="400px" height="400px" /></td>
</tr>
<tr>
<td><img src="img/load.gif" _src="http://demo.kesion.com/UploadFiles/2012/admin/20126182393278906.jpg" alt="" width="400px" height="400px" /> </td>
<td><img src="img/load.gif" _src="http://demo.kesion.com/UploadFiles/2012/admin/20126182393278906.jpg" alt="" width="400px" height="400px" /></td>
</tr>
<tr>
<td><img src="img/load.gif" _src="http://demo.kesion.com/UploadFiles/2012/admin/20126182393278906.jpg" alt="" width="400px" height="400px" /> </td>
<td><img src="img/load.gif" _src="http://demo.kesion.com/UploadFiles/2012/admin/20126182393278906.jpg" alt="" width="400px" height="400px" /></td>
</tr>
<tr>
<td><img src="img/load.gif" _src="http://demo.kesion.com/UploadFiles/2012/admin/20126182393278906.jpg" alt="" width="400px" height="400px" /> </td>
<td><img src="img/load.gif" _src="http://demo.kesion.com/UploadFiles/2012/admin/20126182393278906.jpg" alt="" width="400px" height="400px" /></td>

</tr>
</table>
</body>
</html>
  <script type="text/javascript">
        function delayload(option){
            var _src ='';
            //指定那些id下的img元素使用延迟显示
            var id = option.id ? option.id : [];
            //图片列表
            var imgs = [];

            //获得所有的图片元素
            for(var i=0 ; i < id.length ; i++){
                var idbox = document.getElementById(id[i]),_imgs;
                if(idbox && (_imgs = idbox.getElementsByTagName('img'))){
                    for(var t=0 ; t < _imgs.length ; t++){
                        imgs.push(_imgs[t]);
                    }
                }
            }

            //取元素的页面绝对 X位置
            var getLeft = function(El){
                var left = 0;
                do{
                    left += El.offsetLeft;
                }while((El = El.offsetParent).nodeName != 'BODY');
                return left;
            };
            //取元素的页面绝对 Y位置
            var getTop = function(El){
                var top = 0;
                do{
                    top += El.offsetTop;
                }while((El = El.offsetParent).nodeName != 'BODY');
                return top;
            };

            //是否为ie，并读出ie版本
            var isIE = !!navigator.userAgent.match(/MSIE\b\s*([0-9]\.[0-9]);/img);
            isIE && (isIE = RegExp.$1);
            //是否为chrome
            var isGoo = !!navigator.userAgent.match(/AppleWebKit\b/img);
            //获得可以触发scroll事件的对象
            var box = isIE ? document.documentElement : document;
            //body元素的scroll事件
            var onscroll = box.onscroll = function(){
                //读取滚动条的位置和浏览器窗口的显示大小
                var top = isGoo ? document.body.scrollTop : document.documentElement.scrollTop,
                    left = isGoo ? document.body.scrollLeft :document.documentElement.scrollLeft,
                    width = document.documentElement.clientWidth,
				    height = document.documentElement.clientHeight / 2 ;

                //对所有图片进行批量判断是否在浏览器显示区域内
                for(var i=0 ; i < imgs.length; i++){
                    var _top = getTop(imgs[i]),_left = getLeft(imgs[i]);
                    //判断图片是否在显示区域内
                    if( _top >= top &&
                        _left >= left &&
                        _top <= top+height &&
                        _left <= left+width){
                        var _src = imgs[i].getAttribute('_src');
                        //如果图片已经显示，则取消赋值
                        if(imgs[i].src !== _src){
                            imgs[i].src = _src;
                        }
                    }
                }
            };

			//加载滚动条
			onscroll();

        }
        delayload({id:['out1','out2']});
      </script>


wzm112
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript图片延迟加载实现方法及思路
10-23
主要介绍了javascript图片延迟加载实现方法及思路，有时我们需要用懒加载，也就是延迟加载图片的方式，来提高网站的亲和力,需要的朋友可以参考下
JS实现图片延迟加载（图片懒加载）
Rossbort的博客
09-13 1077
1
js延迟加载的方式有哪些
最新发布
子玉的博客
11-02 343
3. 使用 Intersection Observer API：Intersection Observer API 可以观察元素是否进入视口，并在满足条件时执行相关代码或加载资源。4. 使用异步加载脚本：可以通过创建 `` 标签并将 `async` 或 `defer` 属性设置为 true，来实现异步加载脚本。5. 使用动态创建的 `` 元素：可以通过创建新的 `` 元素，并将 `src` 属性设置为要加载的图片路径，来实现延迟加载。当图片加载完成后，可以执行相关代码。
html延迟执行_浏览器图片属性loading="lazy"延迟请求加载资源
weixin_39835991的博客
12-01 828
HTML元素<img>延迟加载属性 —— loading属性值lazy允许浏览器选择性加载IMG元素，根据用户滚动操作至其元素附近执行加载，一定程度起到节流的作用。浏览器图片属性loading="lazy"延迟请求加载资源 - By DeathGhost​www.deathghost.cn懒加载、延迟加载亦或所谓的按需加载，通常在业务项目中，我们会考虑到此场景该如何处理？例如Angul...
JS实现图片延迟加载
08-25 3596
在一些图片比较多的网站，往往会出现这样的问题：由于页面中的图片资源多，加上网速的不给力，导致页面的图片迟迟加载不出来，或者所有的图都是加载到半张的样子，让人非常不爽，这种情况导致了非常差的用户体验，最终会让用户失去耐心，使得该网站的流量流失，现在我们就来探讨一下如何解决这个问题。
JS 实现图片延迟加载（懒加载）
雪急飞绪博客
12-20 1140
实现原理 结构中，我们使用一个盒子包裹着图片（图片不显示的时候，可以先占据着这个位置，并且设置默认背景图或背景颜色） 最开始，img 的 src 设置默认背景图，并把图片真实地址放到自定义属性中（比如：data-src ） 当 JS 监听到该图片元素进入可视窗口时，将自定义属性中的地址放到 src 属性中，达到懒加载效果 作用： 防止页面一次性向服务器发送大量请求，导致页面卡顿 全部加载会耗费大量流量 预备知识： clientHeight：当前盒子可视区域的高度（height+上下padding
js图片延迟加载的实现方法及思路
10-27
里延迟加载的意思是，拖动滚动条时，在图片出现在浏览器显示区域后才加载显示。
js简单实现图片延迟加载的方法
01-19
本文实例讲述了js简单实现图片延迟加载的方法。分享给大家供大家参考，具体如下： [removed]=[removed]=[removed]=function() { showImg(); }; function getPos(obj) { var l=0; var t=0; while(obj) { l+=...
JS图片延迟加载插件LazyImgv1.0用法分析【附demo源码下载】
01-19
本文实例讲述了JS图片延迟加载插件LazyImgv1.0用法。分享给大家供大家参考，具体如下： 注：LazyImg 必须定义lazy-data属性，属性值是src的图片路径 引入JS文件： [removed][removed] 默认情况下: 在IMG中满足以...
JS延迟加载的几种方式
热门推荐
meijory的博客
07-30 9万+
JS延迟加载，也就是等页面加载完成之后再加载 JavaScript 文件。一般有以下几种方式：1. defer 属性HTML 4.01 为 <script>标签定义了 defer属性。 用途：表明脚本在执行时不会影响页面的构造。也就是说，脚本会被延迟到整个页面都解析完毕之后再执行。在<script> 元素中设置 defer 属性，等于告诉浏览器立即下载，但延迟执行。<!DOCTYPE html>
js图片实现延迟加载
apple20141201的博客
08-02 71
1 <script type="text/javascript"> 2 function delayload(option){ 3 //读取参数 4 //图片未加载时显示的图片 5 var src = option.src ? option.src : '', 6...
图片延迟加载技术
06-16 578
图片延迟加载技术 当访问一个页面的时候，先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径（这样就只需请求一次），只有当图片出现在浏览器的可视区域内时，才设置图片正真的路径，让图片显示出来。这就是图片懒加载。 只需引用一个jsp页面 &amp;lt;%@ page language=&quot;java&quot; import=&quot;java.util.*&quot; pageEncoding=&quot;...
js延迟加载的几种方法
Wopelo的博客
02-21 4439
众所周知，在一个HTML页面加载的时候，如果遇到script标签，一般情况下会停止页面渲染，转而加载并执行脚本，等到脚本执行结束后才继续渲染页面。 但世界上存在可以使js延迟加载的方法，这些方法有助于提高页面加载速度 1.defer属性 作用 脚本会立即下载，但要在页面已加载之后才运行脚本 使用 &amp;amp;lt;script type=&amp;quot;text/javascript&amp;quot; src=&amp;quot;demo_d...
js实现网页图片延时加载的原理和代码
alvinchen1010的专栏
01-18 99
  大家如果使用firebug去查看的话就会发现，当你滚动到相应的行时，当前行的图片才即时加载的，这样子的话页面在打开只加可视区域的图片，而其它隐藏的图片则不加载，一定程序上加快了页     大家如果使用firebug去查看的话就会发现，当你滚动到相应的行时，当前行的图片才即时加载的，这样子的话页面在打开只加可视区域的图片，而其它隐藏的图片则不加载，一定程序上加快了页面加载的速度，对于比较...
js实现图片延迟加载
duo1207的博客
08-09 1088
/* * 思路： * 1.获取可视窗口高（clientHeight）、各个图片的绝对距离（getPub函数）以及滚动进去的高（scrollTop) * 2.滚动进去的高（scrollTop) + 视窗口高（clientHeight）&gt;=各个图片的绝对距离 * 3.若满足第2步的条件，就让自定义属性的内容 赋值给img的src属性； * */ /*获取当前元素到html的距离*/ func...
前端性能优化--延迟加载js、css、图片等组件
cangowu的博客
03-04 9754
上一张讲了关于图标使用雪碧图或者内联图片可以提升性能，但是在工作和开发中我们可能还是会遇到，一个界面加载很多js、css、大的背景图片的时候，这里我给大家提供一种思路，延迟加载，意思就是说，页面一开始加载的时候，你可以将一些需要的文件加载，至于那些后面才会用到的js、css、图片等文件，可以在页面加载之后再加载。 0、普通加载：加载用时215ms 1、延迟加载：加载用时55ms
如何使用图片延迟加载
05-31
3. 使用JavaScript初始化延迟加载：在页面加载完成后，使用JavaScript初始化延迟加载。例如，在使用"Lazysizes"库时，你可以使用以下代码： ``` <script src="lazysizes.min.js"> window.onload = function() { ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值