js 可视区域加载

最新推荐文章于 2022-08-17 16:19:36 发布
最新推荐文章于 2022-08-17 16:19:36 发布
阅读量729 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wu449059908/article/details/53762902
版权 
<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="utf-8">
	<title>dome</title>
	<style type="text/css">
		#domo{
			width:500px;height:300px;margin:1000px auto 100px auto;background: orange;
		}
		@keyframes fadeInLeft{
			0%{
				opacity:0;
				transform:translate3d(-100%,0,0);
				-webkit-transform:translate3d(-100%,0,0);
				-ms-transform:translate3d(-100%,0,0);
			}
			100%{
				opacity:1;
				transform:none;
				-webkit-transform:none;
				-ms-transform:none;
			}
		}
		@-webkit-keyframes fadeInLeft{
			0%{
				opacity:0;
				transform:translate3d(-100%,0,0);
				-webkit-transform:translate3d(-100%,0,0);
				-ms-transform:translate3d(-100%,0,0);
			}
			100%{
				opacity:1;
				transform:none;
				-webkit-transform:none;
				-ms-transform:none;
			}
		}
		.fadeInLeft{
			animation:fadeInLeft 2s;
			-webkit-animation:fadeInLeft 2s;
		}
	</style>
</head>
<body>
	<div id="domo"></div>
	<script type="text/javascript">
		function fadeIn(){
			var domo=document.getElementById("domo");
			var clients=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight;
			var domoTop=domo.getBoundingClientRect().top;
			if(domoTop<=clients){
				domo.classList.add("fadeInLeft");
			}
		}
		window.οnscrοll=fadeIn;
	</script>
</body>
</html>

wu449059908
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
快速实现JS图片懒加载(可视区域加载)示例代码
11-28
js懒加载图片 如何提高网页加载速度？在网页中有许多img标签，这些标签就是图片，其属性src则是指向服务器地址，当浏览器从上往下读取到src标签中的地址时，浏览器就会开启线程，加载这张图片。而并不是等到整张页面都解析完成才加载图片。我们要做的就是加载用户可视范围内的图片。 js懒加载图片的目的      1.网页优化，提高网页加载速度      2.页面优化友好，提高SEO收录与排名      3.提高用户体验，减少服务器压力 实例代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <tit
网页Screen width、height、availWidth、availHeight属性
weixin_30546933的博客
09-22 215
*screen.width 　　功能：声明了显示浏览器的屏幕的宽度，以像素计。 　　语法：screen.width *screen.height 　　功能：声明了显示浏览器的屏幕的可用宽度，以像素计。 　　语法：screen.availWidth *screen.availWidth 　　功能：声明了显示浏览器的屏幕的可用宽度，以像素计。 　　语法：screen.a...
js获取浏览器可视区域的宽度
欢欢的博客
06-02 1010
在没有声明DOCTYPE的IE中，浏览器显示窗口大小只能以下获取： document.body.offsetWidth document.body.offsetHeight 在声明了DOCTYPE的浏览器中，可以用以下来获取浏览器显示窗口大小： document.documentElement.clientWidth document.documentElement.clientHeight 网页可见区域宽： document.body.clientWidth;     网页可
js如何判断一个元素在可视区域内
chenxiaoyi0207的博客
11-08 9523
下方通用示例html的dom和公共js代码： <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /&g
js实现前端无限滚动中的虚拟列表效果(只渲染可视区域，dom元素可复用)
HHH917的博客
08-26 5885
初次 效果 代码 <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>无限滚动(只渲染可视区域，dom元素可复用)</title> <meta name="viewport" content="initial-scale=1.0
可视区域判断（js三种方式判断）
编码世界
08-17 800
公式：el.offsetTop - document.documentElement.scrollTop
js可视区域加载
DreamFJ的博客
08-09 1798
       当元素处于可视区域时再加载，例如淘宝天猫上打开网页时不是所有图片都加载出来了，而是当滚动条滚动到那个区域时才加载出来图片。   方法：判断元素顶部到浏览器窗口顶部的距离是否小于可视区域高度，如果小于就显示。这里可以用一个方法： getBoundingClientRect()，该方法返回一个对象，该对象存储了元素四个边界到浏览器窗口上边和左边的距离。 getBoundingCli...
js 元素进入可视区域 加载数据
qq_25354709的专栏
12-27 938
参考博客： 一、js可视区域加载：getBoundingClientRect方法
基于vue的懒加载插件实现图片或者其他资源进入可视区域后加载
08-12
基于vue的懒加载插件 - 实现图片或者其他资源进入可视区域后加载
WOW.js（可视区域展示动画）
08-13
WOW.js（可视区域展示动画）：http://blog.csdn.net/libin_1/article/details/52200659
解密小米魅族等网站在可视区域加载动画
08-13
解密小米魅族等网站在可视区域加载动画：http://blog.csdn.net/libin_1/article/details/52199758
JS实现页面数据懒加载
11-20
Div移动到可视区域再去ajax加载内容。 最近有需求做页面的多个table用于加载数据，但是用户浏览页面的时候不需要一次将页面所有的东西加载出来，比如页面上3个table就占满了，用户点进去第一眼也就只能看到3个。为了...
可视区域加载动画
我的技术博客
11-22 836
作者：lMadman 链接：https://www.jianshu.com/p/c165f2e06a44 來源：简书 有一些需求，是当我们去浏览时才会去加载，譬如一些动画，和一些图片，那么这些是怎样实现的呢？ 先来看一下下面的一段小代码： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="...
JavaScript和jQuery懒加载之可视区域加载
09-20 2503
JavaScript懒加载之可视区域加载 在制作js可视区域加载之前，我们首先必须了解各种高度，我之前的一篇文章javascript的height总结，大家可以看一下，复习一下！ 了解了各种高度之后，我们开始我们的js代码吧！ html> html lang="en"> head> meta charset="UTF-8"> title>haorooms前端博
js判断元素是否在可视区域内
itSeven7的博客
05-18 8937
判断可视区内的元素为每个元素添加显示隐藏
js图片懒加载（可视区域加载）
ZHIYUANfL的博客
04-06 2152
图片懒加载(可视区域加载) * { padding: 0px; margin: 0px; } html, body { width: 100%; min-height: 100%; } #SB { margin: 0; padding: 0; list-style: none; } #SB .in { border: 1px solid red;
2010考研管理类联考综合能力答案解析.pdf
最新发布
04-24
考研管理类联考综合能力答案解析，考研真题，考研历年真题，考研管理类联考历年真题，真题解析。
lazyload 页面可视化加载
09-09
Lazyload 页面可视化加载有多种实现方式，常见的方式是使用 JavaScript 监听用户的滚动事件，当用户滚动到某个区域时，将该区域的内容加载进来。可以使用“data-”属性来标记需要延迟加载的内容，然后通过 ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值