图片延时加载(零依赖)

最新推荐文章于 2023-09-17 20:19:20 发布
最新推荐文章于 2023-09-17 20:19:20 发布
阅读量548 收藏
点赞数
分类专栏： 微信开发笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ForeverLoveMM/article/details/62423206
版权

话不多说，直接上干货：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
img{
width: 100%;
}
</style>
</head>
<body>
<img src="img/default_bg.jpg" data-src = "http://image1.92bizhi.com/art_apple-logo-widescreen--01_16-1440x900.jpg" />
<img src="img/default_bg.jpg" data-src = "http://image1.92bizhi.com/art_apple-logo-widescreen--01_16-1440x900.jpg"/>
<img src="img/default_bg.jpg" data-src = "http://image1.92bizhi.com/art_apple-logo-widescreen--01_16-1440x900.jpg"/>
<img src="img/default_bg.jpg" data-src = "http://image1.92bizhi.com/art_apple-logo-widescreen--01_16-1440x900.jpg"/>
<img src="img/default_bg.jpg" data-src = "http://image1.92bizhi.com/art_apple-logo-widescreen--01_16-1440x900.jpg"/>
<img src="img/default_bg.jpg" data-src = "http://image1.92bizhi.com/art_apple-logo-widescreen--01_16-1440x900.jpg"/>
<img src="img/default_bg.jpg" data-src = "http://image1.92bizhi.com/art_apple-logo-widescreen--01_16-1440x900.jpg"/>
<img src="img/default_bg.jpg" data-src = "http://image1.92bizhi.com/art_apple-logo-widescreen--01_16-1440x900.jpg"/>
<img src="img/default_bg.jpg" data-src = "http://image1.92bizhi.com/art_apple-logo-widescreen--01_16-1440x900.jpg" />
<img src="img/default_bg.jpg" data-src = "http://image1.92bizhi.com/art_apple-logo-widescreen--01_16-1440x900.jpg"/>
<img src="img/default_bg.jpg" data-src = "http://image1.92bizhi.com/art_apple-logo-widescreen--01_16-1440x900.jpg"/>
<img src="img/default_bg.jpg" data-src = "http://image1.92bizhi.com/art_apple-logo-widescreen--01_16-1440x900.jpg"/>
<img src="img/default_bg.jpg" data-src = "http://image1.92bizhi.com/art_apple-logo-widescreen--01_16-1440x900.jpg"/>
<img src="img/default_bg.jpg" data-src = "http://image1.92bizhi.com/art_apple-logo-widescreen--01_16-1440x900.jpg"/>
<img src="img/default_bg.jpg" data-src = "http://image1.92bizhi.com/art_apple-logo-widescreen--01_16-1440x900.jpg"/>
<img src="img/default_bg.jpg" data-src = "http://image1.92bizhi.com/art_apple-logo-widescreen--01_16-1440x900.jpg"/>
<img src="img/default_bg.jpg" data-src = "http://image1.92bizhi.com/art_apple-logo-widescreen--01_16-1440x900.jpg" />
<img src="img/default_bg.jpg" data-src = "http://image1.92bizhi.com/art_apple-logo-widescreen--01_16-1440x900.jpg"/>
<img src="img/default_bg.jpg" data-src = "http://image1.92bizhi.com/art_apple-logo-widescreen--01_16-1440x900.jpg"/>
<img src="img/default_bg.jpg" data-src = "http://image1.92bizhi.com/art_apple-logo-widescreen--01_16-1440x900.jpg"/>
<img src="img/default_bg.jpg" data-src = "http://image1.92bizhi.com/art_apple-logo-widescreen--01_16-1440x900.jpg"/>
<img src="img/default_bg.jpg" data-src = "http://image1.92bizhi.com/art_apple-logo-widescreen--01_16-1440x900.jpg"/>
<img src="img/default_bg.jpg" data-src = "http://image1.92bizhi.com/art_apple-logo-widescreen--01_16-1440x900.jpg"/>
<img src="img/default_bg.jpg" data-src = "http://image1.92bizhi.com/art_apple-logo-widescreen--01_16-1440x900.jpg"/>
<img src="img/default_bg.jpg" data-src = "http://image1.92bizhi.com/art_apple-logo-widescreen--01_16-1440x900.jpg" />
<img src="img/default_bg.jpg" data-src = "http://image1.92bizhi.com/art_apple-logo-widescreen--01_16-1440x900.jpg"/>
<img src="img/default_bg.jpg" data-src = "http://image1.92bizhi.com/art_apple-logo-widescreen--01_16-1440x900.jpg"/>
<img src="img/default_bg.jpg" data-src = "http://image1.92bizhi.com/art_apple-logo-widescreen--01_16-1440x900.jpg"/>
<img src="img/default_bg.jpg" data-src = "http://image1.92bizhi.com/art_apple-logo-widescreen--01_16-1440x900.jpg"/>
<img src="img/default_bg.jpg" data-src = "http://image1.92bizhi.com/art_apple-logo-widescreen--01_16-1440x900.jpg"/>
<img src="img/default_bg.jpg" data-src = "http://image1.92bizhi.com/art_apple-logo-widescreen--01_16-1440x900.jpg"/>
<img src="img/default_bg.jpg" data-src = "http://image1.92bizhi.com/art_apple-logo-widescreen--01_16-1440x900.jpg"/>
<img src="img/default_bg.jpg" data-src = "http://image1.92bizhi.com/art_apple-logo-widescreen--01_16-1440x900.jpg" />
<img src="img/default_bg.jpg" data-src = "http://image1.92bizhi.com/art_apple-logo-widescreen--01_16-1440x900.jpg"/>
<img src="img/default_bg.jpg" data-src = "http://image1.92bizhi.com/art_apple-logo-widescreen--01_16-1440x900.jpg"/>
<img src="img/default_bg.jpg" data-src = "http://image1.92bizhi.com/art_apple-logo-widescreen--01_16-1440x900.jpg"/>
<img src="img/default_bg.jpg" data-src = "http://image1.92bizhi.com/art_apple-logo-widescreen--01_16-1440x900.jpg"/>
<img src="img/default_bg.jpg" data-src = "http://image1.92bizhi.com/art_apple-logo-widescreen--01_16-1440x900.jpg"/>
<img src="img/default_bg.jpg" data-src = "http://image1.92bizhi.com/art_apple-logo-widescreen--01_16-1440x900.jpg"/>
<img src="img/default_bg.jpg" data-src = "http://image1.92bizhi.com/art_apple-logo-widescreen--01_16-1440x900.jpg"/>
<img src="img/default_bg.jpg" data-src = "http://image1.92bizhi.com/art_apple-logo-widescreen--01_16-1440x900.jpg" />
<img src="img/default_bg.jpg" data-src = "http://image1.92bizhi.com/art_apple-logo-widescreen--01_16-1440x900.jpg"/>
<img src="img/default_bg.jpg" data-src = "http://image1.92bizhi.com/art_apple-logo-widescreen--01_16-1440x900.jpg"/>
<img src="img/default_bg.jpg" data-src = "http://image1.92bizhi.com/art_apple-logo-widescreen--01_16-1440x900.jpg"/>
<img src="img/default_bg.jpg" data-src = "http://image1.92bizhi.com/art_apple-logo-widescreen--01_16-1440x900.jpg"/>
<img src="img/default_bg.jpg" data-src = "http://image1.92bizhi.com/art_apple-logo-widescreen--01_16-1440x900.jpg"/>
<img src="img/default_bg.jpg" data-src = "http://image1.92bizhi.com/art_apple-logo-widescreen--01_16-1440x900.jpg"/>
<img src="img/default_bg.jpg" data-src = "http://image1.92bizhi.com/art_apple-logo-widescreen--01_16-1440x900.jpg"/>
<img src="img/default_bg.jpg" data-src = "http://image1.92bizhi.com/art_apple-logo-widescreen--01_16-1440x900.jpg" />
<img src="img/default_bg.jpg" data-src = "http://image1.92bizhi.com/art_apple-logo-widescreen--01_16-1440x900.jpg"/>
<img src="img/default_bg.jpg" data-src = "http://image1.92bizhi.com/art_apple-logo-widescreen--01_16-1440x900.jpg"/>
<img src="img/default_bg.jpg" data-src = "http://image1.92bizhi.com/art_apple-logo-widescreen--01_16-1440x900.jpg"/>
<img src="img/default_bg.jpg" data-src = "http://image1.92bizhi.com/art_apple-logo-widescreen--01_16-1440x900.jpg"/>
<img src="img/default_bg.jpg" data-src = "http://image1.92bizhi.com/art_apple-logo-widescreen--01_16-1440x900.jpg"/>
<img src="img/default_bg.jpg" data-src = "http://image1.92bizhi.com/art_apple-logo-widescreen--01_16-1440x900.jpg"/>
<img src="img/default_bg.jpg" data-src = "http://image1.92bizhi.com/art_apple-logo-widescreen--01_16-1440x900.jpg"/>
<img src="img/default_bg.jpg" data-src = "http://image1.92bizhi.com/art_apple-logo-widescreen--01_16-1440x900.jpg" />
<img src="img/default_bg.jpg" data-src = "http://image1.92bizhi.com/art_apple-logo-widescreen--01_16-1440x900.jpg"/>
<img src="img/default_bg.jpg" data-src = "http://image1.92bizhi.com/art_apple-logo-widescreen--01_16-1440x900.jpg"/>
<img src="img/default_bg.jpg" data-src = "http://image1.92bizhi.com/art_apple-logo-widescreen--01_16-1440x900.jpg"/>
<img src="img/default_bg.jpg" data-src = "http://image1.92bizhi.com/art_apple-logo-widescreen--01_16-1440x900.jpg"/>
<img src="img/default_bg.jpg" data-src = "http://image1.92bizhi.com/art_apple-logo-widescreen--01_16-1440x900.jpg"/>
<img src="img/default_bg.jpg" data-src = "http://image1.92bizhi.com/art_apple-logo-widescreen--01_16-1440x900.jpg"/>
<img src="img/default_bg.jpg" data-src = "http://image1.92bizhi.com/art_apple-logo-widescreen--01_16-1440x900.jpg"/>

<script>

function throttle(fn, delay, atleast) {
   var timeout = null,
startTime = new Date();
   return function() {
var curTime = new Date();
clearTimeout(timeout);
if(curTime - startTime >= atleast) {
   fn();
   startTime = curTime;
}else {
   timeout = setTimeout(fn, delay);
}
    }
}
function lazyload() {
   var images = document.getElementsByTagName('img');
   var len    = images.length;
   var n      = 0;      //存储图片加载到的位置，避免每次都从第一张图片开始遍历
   return function() {
var seeHeight = document.documentElement.clientHeight;
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
for(var i = n; i < len; i++) {
console.info("seeHeight="+seeHeight+"---------------scrollTop="+scrollTop)
   if(images[i].offsetTop < seeHeight + scrollTop) {
       if(images[i].getAttribute('src') === 'img/default_bg.jpg') {
        console.info("进入图片延时加载"+i)
    images[i].src = images[i].getAttribute('data-src');
       }
n = n + 1;
    }
}
   }
}
var loadImages = lazyload();
loadImages();          //初始化首页的页面图片
window.addEventListener('scroll', throttle(loadImages, 500, 1000), false);

</script>
</body>
</html>

xietianyao_it
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ajax异步加载延时问题,关于js延迟加载（异步操作）的方式
weixin_29920889的博客
08-05 1105
一、概述最近重新开始学习js，在第一章的一个小节里写到了“脚本调用策略”，书上写的这部分不多，但是发现在我之前的(笔)面试中，问到的频率还是比较高的。自己一直习惯于直接把所有js文件写在head里，后来了解到优化后，会把js放在最底部，但并不太懂这样做的好处，而且其他的一些处理方式，自己也并未有过实际的操作。在面试中对这部分的考察，主要考察的是程序的性能方面。程序的性能是一个项目不断地追求的，通常...
html5 页面 懒加载,实现图片懒加载(lazyload)的两种方式
weixin_29051245的博客
06-03 1403
在实际的项目开发中，我们通常会遇见这样的场景：一个页面有很多图片，而首屏出现的图片大概就一两张，那么我们还要一次性把所有图片都加载出来吗？显然这是愚蠢的，不仅影响页面渲染速度，还浪费带宽。这也就是们通常所说的首屏加载，技术上现实其中要用的技术就是图片懒加载–到可视区域再加载。图片懒加载的思路将页面里所有img属性src属性用data-xx代替，当页面滚动直至此图片出现在可视区域时，用js取到该图片...
延时加载DLL
Jokey_Chan 的博客
04-28 792
通常情况下应用程序 exe 文件与加载的 dll 会安装在同一个目录，想要延时加载 dll 只需要在 VS 属性页-》链接器-》输入-》延迟加载的 DLL 中填入想要加载的 DLL，在 属性页-》链接器-》高级-》卸载延迟加载的 DLL 改为 是 即可。 当应用程序和 DLL，不在同一个目录下时，程序只会在应用程序当前目录搜索 DLL, 此时将会加载失败。为了正确加载 DLL, 需要在程序中将 DLL 的安装目录设置进来。 在我的项目中，windows 系统会启动 AUDIODG.exe 的应用，这个文件在
游戏UI动态加载图片优化
海洋个人博客
08-09 2405
说到UI优化，很多人对其并不以为意，UI的制作无非使用UGUI或者NGUI。UI优化主要是针对图集，还有一些依赖项的优化，针对的是内存优化，上面这些都是关于静态UI的优化，这个是作为程序员都要经历的阶段。其实很多开发者对使用UGUI或者NGUI已经墨守成规了，我们如果真想去优化，其实完全可以自己封装一套UI的底层代码，效率很高的，摒弃了UGUI和NGUI影响效率的代码，自己封装的简单实用，在我的视...
滚动加载图片（懒加载）实现原理
qq_39963971的博客
08-29 1792
本文主要通过以下几方面来说明懒加载技术的原理 一、什么是图片滚动加载？ 　　通俗的讲就是：当访问一个页面的时候，先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径（这样就只需请求一次），只有当图片出现在浏览器的可视区域内时，才设置图片正真的路径，让图片显示出来。这就是图片懒加载。 二、为什要使用这个技术？ 　　比如一个页面中有很多图片，如淘宝、京东
Glide加载图片完成的回调
热门推荐
The blog of CSDN in 杨天福
12-18 1万+
用于加载完成图片后进行的整理操作，比如在listview中或者RecycleView中使用Glide加载完图片后图片不能自己显示完全，要手动上划才能显示完全，这是因为图片加载是异步的，在图片渲染完成之前已经更新了adapter，所以listview在重新绘制的时候并没有把图片的高度算进去，因为这个时候很可能图片还没有渲染出来。可以考虑用回调接口的方式，在图片加载完成后让listview滚动到最底...
Spring进阶（七）之懒加载（解决循环依赖）
weixin_56644618的博客
09-29 1025
Spring中bean的延迟加载
windows黑客编程之单一实例/DLL延时加载/资源释放
weixin_44891742的博客
06-07 919
windows黑客编程技术详解之基础技术
基于Xml方式Bean的配置-Bean的延时加载
最新发布
weixin_64939936的博客
09-17 761
【代码】基于Xml方式Bean的配置-Bean的延时加载。
Java——单例模式和延迟加载
qq_38606783的博客
10-22 4267
延迟加载 延迟加载(lazy load) (也称为懒加载，也叫延迟实例化，延迟初始化等）主要表达的思想就是：把对象的创建延迟到使用的时候创建，而不是对象实例化的时候创建。延迟加载机制是为了避免一些无谓的性能开销而提出来的，这种方式避免了性能的浪费。所谓延迟加载就是当在真正需要数据的时候，才真正执行数据加载操作。 单例模式 单例模式： 因程序需要，有时我们只需要某个类同时保留一个对象，不希望有更多对...
图片延时加载
09-22
图片延时加载是一种优化网页性能的技术，特别是在网页中包含大量图片的情况下非常有用。它通过只在用户滚动到图片所在视窗区域时才加载图片，从而减少了初始页面加载时间，提升了用户体验，同时也降低了服务器带宽...
jQuery图片延时加载插件imgLazyLoad
10-27
**jQuery图片延时加载插件imgLazyLoad详解** 在网页设计中，图片是常见的元素，它们可以提升用户体验，但同时也可能导致页面加载速度变慢。为了优化网页性能，开发者常常使用延时加载（懒加载）技术，只在用户滚动...
网页前端优化之滚动延时加载图片示例
09-05
需要注意的是，尽管这个示例使用了jQuery，但滚动延时加载可以纯JavaScript实现，无需依赖任何库。纯JavaScript版本的代码会稍复杂一些，但能减少额外的HTTP请求和加载库的开销，对于优化性能尤为有利。 总结来说，...
DelayLoadDll_Test_延时加载_延时加载的实现_
10-04
延时加载是一种延迟DLL到运行时按需加载的方法，它不是在进程初始化时加载所有依赖的DLL，而是等到程序真正调用到DLL中的函数时才进行加载。这种技术尤其适用于那些大型或不经常使用的DLL。 2. **工作原理**： - ...
Android启动优化之延时加载的步骤详解
08-26
Android启动优化之延时加载的步骤详解 Android启动优化之延时加载的步骤详解是android开发中一个重要的知识点。通过本文，读者可以了解到Android启动优化之延时加载的相关资料，了解到如何通过延时加载来优化...
scrollLoad_MingGe2.53 延时加载插件
01-13
**延时加载插件——scrollLoad_MingGe2.53详解** 在现代网页设计中，为了提升用户体验和页面性能，一种重要的优化技术是“延迟加载”或“懒加载”（Lazy Loading）。本文将深入探讨名为"scrollLoad_MingGe2.53"的...
vue-lazyload图片延迟加载插件的实例讲解
11-30
在开发大型单页面应用（SPA）时，为了优化用户体验和提高页面加载速度，常采用图片延迟加载（懒加载）技术。Vue-Lazyload 是一个专为 Vue.js 设计的图片懒加载插件，它可以有效地提升网页性能，减少首次加载时的流量...
懒加载LazyLoad延时加载图片效果特效.rar
01-17
标题"懒加载LazyLoad延时加载图片效果特效.rar"表明这是一个关于使用懒加载技术实现图片延迟加载，并带有特效的实例。.rar文件通常包含压缩的资源，如HTML文件（LazyLoad.htm）和JavaScript文件（CJL.0.1.min.js），...
程序延时工具
06-08
2. **冲突减少**：某些程序之间可能存在依赖关系或冲突，通过延时启动，可以确保程序在需要的其他程序运行后启动，避免了运行时的问题。 3. **性能提升**：尤其对于配置较低的计算机，延时启动可以显著提高开机速度...
void delay_us(uint16_t nus) { __asm( "PUSH A \n" //1T,压栈 "DELAY_XUS: \n" "LD A,fac_us \n" //1T,fac_us加载到累加器A "DELAY_US_1: \n" "NOP \n" //1T,nop延时 "DEC A \n" //1T,A-- "JRNE DELAY_US_1 \n" //不等于0,则跳转(2T)到DELAY_US_1继续执行,若等于0,则不跳转(1T). "NOP \n" //1T,nop延时 "DECW X \n" //1T,x-- "JRNE DELAY_XUS \n" //不等于0,则跳转(2T)到DELAY_XUS继续执行,若等于0,则不跳转(1T). "POP A \n" //1T,出栈 ); }
07-16
如果不为零，则跳转到标签 `DELAY_XUS` 继续执行整个延时函数。 7. 最后从栈中弹出累加器A的值（POP A），恢复原始状态。 需要注意的是，这段代码的具体实现可能依赖于特定的编译器和开发环境。在使用之前，请确保...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值