JS懒加载

最新推荐文章于 2024-08-05 13:06:33 发布
最新推荐文章于 2024-08-05 13:06:33 发布
阅读量137 收藏
点赞数
文章标签： 懒加载
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gzkahjl/article/details/97053374
版权

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Document</title>

<link href="animate.css" rel="stylesheet"/>

<style type="text/css">

.image-item{

width:40%;

margin-right: 5px;

display: inline-block;

height: 350px;

width: 250px;

background: silver;

}

 

.beauty-list{

margin: 0 auto;

width: 560px;

height: 1200px;

 

}

</style>

</head>

<body>

<div class="beauty-list">

<img src="" class="image-item" lazyload="true" data-original="http://pic1.win4000.com/pic/3/85/8f95e6676b_250_350.jpg"/>

<img src="" class="image-item" lazyload="true" data-original="http://pic1.win4000.com/pic/9/94/e83f3ee081_250_350.jpg"/>

<img src="" class="image-item" lazyload="true" data-original="http://pic1.win4000.com/pic/d/ab/a770c6585f_250_350.jpg"/>

<img src="" class="image-item" lazyload="true" data-original="http://pic1.win4000.com/pic/7/93/b127f14ce1_250_350.jpg"/>

<img src="" class="image-item" lazyload="true" data-original="http://pic1.win4000.com/pic/9/8d/69f294e09f_250_350.jpg"/>

<img src="" class="image-item" lazyload="true" data-original="http://pic1.win4000.com/pic/5/49/93e9fa5d92_250_350.jpg"/>

<img src="" class="image-item" lazyload="true" data-original="http://pic1.win4000.com/pic/7/db/a66082428c_250_350.jpg"/>

<img src="" class="image-item" lazyload="true" data-original="http://pic1.win4000.com/pic/4/2f/c942ec6a20_250_350.jpg"/>

<img src="" class="image-item" lazyload="true" data-original="http://pic1.win4000.com/pic/4/fd/34e9b78bfe_250_350.jpg"/>

 

</div>

<div id="test">22222</div>

 

<script type="text/javascript"

src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>

<script type="text/javascript"

src="http://www.w3cways.com/demo/LazyLoad/js/jquery.lazyload.js"></script>

 

<script>

 

//图片懒加载

// function lazyload(){

// var viewHeight =window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

 

// var elems = document.querySelectorAll('img[data-original][lazyload]');

// console.log(elems);

// Array.prototype.forEach.call(elems,function(item,idx){

// var rect;

// if(item.dataset.original===''){

// return;

// }

// rect = item.getBoundingClientRect();

// if(rect.bottom>=0 && rect.top < viewHeight){

// !function(){

// var img = new Image();

// img.src = item.dataset.original;

// img.onload = function(){

// item.src = img.src;

// }

// item.removeAttribute('data-original');

// item.removeAttribute('lazyload');

// }()

// }

// });

// }

// lazyload();

// document.addEventListener('scroll',lazyload);




 

//原生懒加载

//可视区域

function showDiv(){

var clients = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

var testDiv = document.getElementById('test');

var top = testDiv.getBoundingClientRect().top;

if(top<=clients){

testDiv.classList.add('animated');

testDiv.classList.add('infinite');

testDiv.classList.add('bounce');

}

}

 

window.onscroll = showDiv;




 

//使用插件zepto.lazyload.js实现懒加载

$('img[data-original][lazyload]').lazyload();

</script>

</body>

</html>

 

效果：

gzkahjl
关注
【JavaScript】懒加载
m0_49442965的博客
12-01 876
【代码】【JavaScript】懒加载。
js实现懒加载
weixin_43627766的博客
03-26 506
原生js window.onload = function(){ var scrollTop = window.scrollY; var imgs = Array.from(document.querySelectorAll('img')); lazyLoad(); // 采用了节流函数 window.add...
懒加载
xxoon
11-21 8890
懒加载什么是懒加载适用场景懒加载的原理jq获取各种高度使用jQuery实现懒加载原生jQuery使用lazyload.js实现懒加载引入js基础使用 什么是懒加载 目前，网络上各大论坛，尤其是一些图片类型的网站上，在图片加载时均采用了一种名为懒加载的方式，具体表现为，当页面被请求时，只加载可视区域的图片，其它部分的图片则不加载，只有这些图片出现在可视区域时才会动态加载这些图片，从而节约了网络带宽和提高了初次加载的速度。 适用场景 懒加载也加延迟加载，延迟加载网络资源或符合某些条件时才加载资源。常见的就是图片
懒加载 （Lazy Loading） in MyBatis
最新发布
欢迎来到我的博客
08-05 427
在 MyBatis 中使用懒加载（Lazy Loading）可以提升应用性能，特别是在处理关联查询时。懒加载的核心理念是：只有在真正需要关联数据时，才执行额外的 SQL 查询来获取这些数据，而不是在初始查询时就加载所有关联数据。
懒加载的定义以及如何使用
木头书屋专栏
08-11 1349
关于懒加载的定义 懒加载就是数据在用到的时候进行加载一次，不用的时候就不需要加载了。通常写在哪个位置呢？——-get方法中。也就是咱们常说的重写，对他的get方法重写。- (NSArray *)shops { if (_shops == nil) { _shops = [NSArray arrayWithContentsOfFile:[[NSBundle mainBund
webpack 懒加载 部署应用 js 404
Cribug8080的博客
05-23 952
webpack懒加载出现的404 场景 部署前端项目-用户访问页面a（未访问其他页面、也没有其他页面的缓存）-码农更新代码-部署前端项目-用户由刚才的页面a跳转到页面b-js文件404 原因：后来部署时候原来的js文件已经删除，但是index.html文件没有刷新，所以不能获取最新的js。 解决办法：在懒加载的import后面添加catch，然后强制刷新页面。 { path: 'home', ...
JS实现页面数据懒加载
11-20
页面数据懒加载是一种优化网页性能的技术，特别是在处理大数据量或者多表格展示时尤为关键。它避免了一次性加载大量数据导致的页面响应速度减慢，从而提升了用户体验。在JavaScript中，我们可以利用DOM操作和浏览器...
JavaScript实现图片懒加载(Lazyload)
10-21
在讨论如何使用JavaScript实现图片懒加载前，我们先来了解为什么需要图片懒加载。 首先，页面加载速度受到多种因素的影响，其中图片无疑是一个重要的因素。现代网页中的图片往往尺寸较大，质量高，这就导致单个图片...
js实现图片懒加载效果
10-19
在本文中，我们关注的是如何利用js实现图片懒加载效果。实现图片懒加载的关键在于判断哪些图片需要立即加载，哪些图片可以延迟加载。通常的做法是监听滚动事件，结合图片距离视窗顶部的位置来决定何时加载图片。 ...
懒加载的实现
AnitaSun的博客
01-31 6415
一、什么是懒加载？ 懒加载突出一个“懒”字，懒就是拖延迟的意思，所以“懒加载”说白了就是延迟加载，比如我们加载一个页面，这个页面很长很长，长到我们的浏览器可视区域装不下，那么懒加载就是优先加载可视区域的内容，其他部分等进入了可视区域在加载 二.为什么要懒加载？ 减少无用资源的加载 提升用户体验 防止加载过多图片而影响其它资源文件的加载 三.懒加载的实现原理？ 图片的加载是由 src 引起的，当对 src 赋值时，浏览器就会请求图片资源。根据这个原理，我们使用 HTML5 的 data-xxx 属性
HTML加载gz文件,webpack打包的.gz文件，怎么在浏览器页面中引用
weixin_39945816的博客
06-09 1854
做的是 react 项目，在 webpack 中利用压缩插件 compression-webpack-plugin 将main.bundle.js 压缩成了 main.bundle.js.gz ,看起来是边小了，但是在从服务器上取下来的还是之前的 main.bundle.js ，问大牛们，怎么才能取到 main.bundle.js.gz 这个压缩后的文件？取到 .gz 文件了，浏览器能正常解析吗？...
懒加载的原理及实现
热门推荐
Preeminent
01-13 6万+
懒加载的原理 原理：先将img标签中的src链接设为同一张图片（空白图片），将其真正的图片地址存储再img标签的自定义属性中（比如data-src）。当js监听到该图片元素进入可视窗口时，即将自定义属性中的地址存储到src属性中，达到懒加载的效果。 这样做能防止页面一次性向服务器响应大量请求导致服务器响应慢，页面卡顿或崩溃等问题。 代码实现 既然懒加载的原理是基于判断元素是否出现在窗口可视范围内，首
如何实现图片懒加载
Amy_cloud的博客
12-04 1082
原文来自微信公众号：web前端学习圈 什么是懒加载？ 懒加载其实就是延迟加载，是一种对网页性能优化的方式，比如当访问一个页面的时候，优先显示可视区域的图片而不一次性加载所有图片，当需要显示的时候再发送图片请求，避免打开网页时加载过多资源。 懒加载原理 img标签有一个属性是 src，用来表示图像的URL，当这个属性的值不为空时，浏览器就会根据这个值发送请求。如果没有 src属性，就不会发送请求。...
什么是“懒加载”（Lazy Loading）？
Welcome~
10-29 1万+
“懒加载”也被叫作“延迟价值”，它的核心思想是把对象的实例化延迟到真正调用该对象的时候，这样做的好处是可以减轻大量对象在实例化时对资源的小号，而不是在程序初始化的时候就预先将对象实例化。另外“懒加载”可以将对象的实例化代码从初始化方法中独立出来，从而提高代码的可读性，以便于代码能够更好地组织。 最典型的一个应用“懒加载”的例子是在对象的getter方法中实例化对象，例如getter方法被重写，使...
webpack打包的.gz文件，怎么在浏览器页面中引用
知识改变一切
10-17 4309
https://segmentfault.com/q/1010000012377236   gzip on; gzip_disable "msie6"; gzip_buffers 32 4k; gzip_static on; 最主要的是gzip_static on;这一句，nginx 会优先匹配你的 gzip 文件来返回，如果没有就寻找相应资源进行 gzip 压缩再返回。...
【116】vue-router使用懒加载机制，在生产环境中，如何避免浏览器缓存Webpack 3 编译后生成的js路径，导致404错误。（二）
zhangchao19890805的专栏
04-08 3389
整理思路 我在【115】vue-router使用懒加载机制，在生产环境中，如何避免浏览器缓存Webpack 3 编译后生成的js路径，导致404错误。（一） 一文中已经详细阐述了问题产生的原因和重现的方法。一共有两种解决方法。这篇文章准备详细解说一下第一种解决方法。 要解决这个问题，F5 刷新是最好的解决办法。但是每次发布新版本后，都要求用户主动按 F5 刷新浏览器，会让用户觉得不方便。这对于...
什么是懒加载?如何实现懒加载?
weixin_49733248的博客
08-02 1万+
懒加载也叫延迟加载，指的是在长网页中延迟加载图像，是一种很好优化网页性能的方式。 懒加载的优点： 提升用户体验，加快首屏渲染速度； 减少无效资源的加载； 防止并发加载的资源过多会阻塞 js 的加载； 懒加载的原理： 首先将页面上的图片的src属性设为空字符串，而图片的真实路径则设置在data-original属性中，当页面滚动的时候需要去监听scroll事件，在scroll事件的回调中，判断我们的懒加载的图片是否进入可视区域，如果图片在可视区内则将图片的src属性设置为dat...
vue2.0+ 结合webpack3.0 延时路由 按需加载
夏小球的博客
11-27 886
路由懒加载 当打包构建应用时，Javascript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。 结合 Vue 的异步组件和 Webpack 的代码分割功能，轻松实现路由组件的懒加载。 首先，可以将异步组件定义为返回一个 Promise 的工厂函数 (该函数返回的 Promise 应该 resolve...
vue3 js懒加载
10-12
Vue3中可以使用异步组件实现懒加载，具体步骤如下： 1. 安装@vue/cli-service-global依赖：npm install -g @vue/cli-service-global 2. 在组件中使用import()语法引入需要懒加载的组件，例如：const Foo = () => import('./Foo.vue') 3. 在路由配置中使用component属性指定需要懒加载的组件，例如：{ path: '/foo', component: Foo }
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值