js页面可视区域懒加载

最新推荐文章于 2021-11-26 17:33:10 发布
最新推荐文章于 2021-11-26 17:33:10 发布
阅读量163 收藏
点赞数
文章标签： c#
原文链接：http://www.cnblogs.com/yuri2016/p/7838432.html
版权 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
    margin: 0;
}
ul{
    margin: 0;
    padding: 0;
    list-style: none;
}
img{
    border: none;
    vertical-align: middle;
}
.in{
    border: 1px solid black;
    margin: 10px;
    text-align: center;
    height: 400px;
    width: 400px;
    float: left;
}
.in img{
    height: 400px;
    width: 400px;
}
</style>
</head>
<body>
<ul class="list">
    <li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/img1.gif"></li>
    <li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/img2.gif"></li>
    <li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/img3.gif"></li>
    <li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/img4.gif"></li>    
    <li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/img1.gif"></li>
    <li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/img2.gif"></li>
    <li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/img3.gif"></li>
    <li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/img4.gif"></li>                           
</ul>

<script>
var oBtn = document.getElementsByTagName('button')[0];
var aImages = document.images;
loadImg(aImages);
window.onscroll = function(){
    loadImg(aImages);
};
function loadImg(arr){
    for( var i = 0,len = arr.length; i < len; i++){
        if(arr[i].getBoundingClientRect().top < document.documentElement.clientHeight && !arr[i].isLoad){
            arr[i].isLoad = true;
            arr[i].style.cssText = "transition: ''; opacity: 0;"
            if(arr[i].dataset){
                aftLoadImg(arr[i],arr[i].dataset.original);    
            }else{
                aftLoadImg(arr[i],arr[i].getAttribute("data-original"));
            }
            (function(i){
                setTimeout(function(){
                    arr[i].style.cssText = "transition: 1s; opacity: 1;"
                },16)
            })(i);
        }
    }
}
function aftLoadImg(obj,url){
    var oImg = new Image();
    oImg.onload = function(){
        obj.src = oImg.src;
    }
    oImg.src = url;
}

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

 

转载于:https://www.cnblogs.com/yuri2016/p/7838432.html

weixin_30790841
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js 可视区域加载
wu449059908的专栏
12-20 744
dome #domo{ width:500px;height:300px;margin:1000px auto 100px auto;background: orange; } @keyframes fadeInLeft{ 0%{ opacity:0; transform:translate3d(-100%,0,0); -webkit-trans
javascript 实现懒加载效果
06-06
html css javascript
快速实现JS图片懒加载(可视区域加载)示例代码
10-20
目前很多网站，在图片加载时均采用了一种名为懒加载的方式，具体表现为，当页面被请求时，只加载可视区域的图片，其它部分的图片则不加载，只有这些图片出现在可视区域时才会动态加载这些图片，下面本文就介绍了JS图片懒加载(可视区域加载)的实现方法，一起来看看吧。
可视区域懒加载
weixin_33911824的博客
06-30 103
在制作js可视区域加载之前，我们首先必须了解各种高度，我之前的一篇文章javascript的height总结，大家可以看一下，复习一下！ 了解了各种高度之后，我们开始我们的js代码吧！ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti...
js页面懒加载
qq_45932382的博客
11-26 647
通过jquery实现根据滚动页面加载相关数据。 $(function() { getCount(); // 设置布尔值用于判断是否该DIV到达过可视区域 var scrollflaga = true; var page=1; //ajax请求第一页数据 getFinishList(page); var flag=true; // 监听滚轮事件 $(window.
js可视区域图片懒加载
weixin_30906671的博客
04-24 89
可视区域图片懒加载 实现原理，页面滚动时获取需要懒加载的图片，判断此图片是否在可视区域内，是则设置图片data-src地址为src地址，加载图片。 html下载地址 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &lt...
JS实现页面数据懒加载
11-20
即`a >= $(window).scrollTop() && a ($(window).scrollTop()+$(window).height())`，说明`div`进入了可视区域，此时将`scrollflaga`设置为`false`，防止重复加载，并执行预设的Ajax请求函数`loadingFunction()`来...
js和jquery懒加载之可视区域加载
xiaoerduo123x的博客
09-18 1421
懒加载 在Web应用程序中，系统的瓶颈常在于系统的响应速度。如果系统响应速度过慢，用户就会出现埋怨情绪，系统的价值也因此会大打折扣。因此，提高系统响应速度，是非常重要的。 Web应用程序做的最多就是和后台数据库交互，而查询数据库是种非常耗时的过程。当数据库里记录过多时，查询优化更显得尤为重要。为了解决这种问题，有人提出了缓存的概念。缓存就是将用户频繁使用的数据放在内存中以便快速访问。在
HTML图片懒加载可视化页面,JS实现图片懒加载(lazyload)
weixin_29313423的博客
06-07 323
原理对于标签，在初次加载时，不把URI放在src属性中，而是自定义一个属性，比如data-src，然后仅当图片滚入视窗，被用户看到时，它才会真正加载。下图详解了如何判断何时加载图片。判断何时加载图片浏览器可视区域高度H，通常是固定的(这里不考虑手动调整窗口大小)window.innerHeight可取得此值。图片距离页面顶端的距离T，也是固定值可用offsetTop(或getBoundingCli...
JS实现图片懒加载效果
春雨惊春.
07-05 479
文章目录前言一、图片实现懒加载步骤二、案例练习（三国女将）1. html 代码2. css 代码3. js 代码执行结果 前言 懒加载时一种也页面效果，可以提高页面加载速率，并降低服务器的贷款和资源损耗。 一、图片实现懒加载步骤 先清空图片的 src 属性值，以使浏览器不加载图片 然后再在需要加载图片时，为图片添加上 src 属性 二、案例练习（三国女将） 1. html 代码 <!doctype html> <html lang="en"> <head>
js实现图片的懒加载
weixin_45966674的博客
03-11 459
前端js实现页面图片懒加载 前端技术发展至今，我们对性能的追求不断提升，不断变化的是技术，但我们对用户体验的极致追求却始终如一。 所有前端(特别是soe除了类)都会因图片的加载而发愁，图片作为巨大的请求信息类，用时巨大。 那我们该如何处理呢? 这就涉及到了图片懒加载 所谓懒加载其实就是一种视觉欺骗 我们先去掉所有图片的src 将其改成 data-src <img data-src = "images/case/Exhibition.png"/> 因为没有src属性存在 页面就不会发送异
js图片（加载已经滚动的区域的图片）懒加载的实现方法
劲枫的博客
09-26 1074
这种方法，会加载已经滚动区域的所有图片，比如进入页面就到了底部，那么整个页面的图片都会加载。 区别于JS实现可视区域懒加载 、Jquery实现可是区域懒加载 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&
js 延迟加载页面图片（当图片出现在窗口可视区域的时候加载）
banyu06120的专栏
06-18 292
简单Jquery代码，实现图片延迟加载. <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> <script type="text/javascript"> $(function(){ showimg();//加载第一屏 $(windo...
页面指定区域懒加载
weixin_41192163的博客
11-29 887
前端博客-可视区域加载之 javascript             img{width:100%;margin-bottom: 30px; min-height: 400px; background-color: #ddd;}         var imgNum=document.getElementsByTagName('img'
(可视区域加载)图片懒加载实现原理
weixin_34352005的博客
09-08 265
参考文章：http://www.cnblogs.com/xiaohuochai/p/4859485.html                http://www.cnblogs.com/xiaohuochai/p/4859899.html                     http://www.cnblogs.com/vajoy/p/4263291.html 定义 　　图片延迟加载也...
JavaScript和jQuery懒加载之可视区域加载
09-20 2522
JavaScript懒加载之可视区域加载 在制作js可视区域加载之前，我们首先必须了解各种高度，我之前的一篇文章javascript的height总结，大家可以看一下，复习一下！ 了解了各种高度之后，我们开始我们的js代码吧！ html> html lang="en"> head> meta charset="UTF-8"> title>haorooms前端博
js图片懒加载（可视区域加载）
ZHIYUANfL的博客
04-06 2164
图片懒加载(可视区域加载) * { 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;
lazyload 页面可视化加载
最新发布
09-09
Lazyload 页面可视化加载是一种优化网页加载速度的技术。传统网页加载通常会一次性加载所有的资源，包括图片、视频等，这会导致页面加载时间过长，并且占用大量的网络带宽。而 Lazyload 页面可视化加载则是根据用户的浏览行为，只加载用户当前可见区域的内容，从而提高页面加载速度和用户体验。 Lazyload 页面可视化加载的实现原理是，当页面加载时，只加载用户当前可见区域的内容，而不加载其他区域的内容。当用户滚动页面或者执行其他操作时，才加载相应区域的内容。这样可以大大减少页面需要加载的资源量，加快页面加载速度。 Lazyload 页面可视化加载有多种实现方式，常见的方式是使用 JavaScript 监听用户的滚动事件，当用户滚动到某个区域时，将该区域的内容加载进来。可以使用“data-”属性来标记需要延迟加载的内容，然后通过 JavaScript 获取这些标记，并进行加载。另一种方式是使用 Intersection Observer API，该 API 可以监听元素是否进入视窗，从而实现 Lazyload。 Lazyload 页面可视化加载的优势主要体现在两个方面。首先，在用户打开网页时，只加载当前可见区域的内容，可以显著提高页面的加载速度，让用户更快地看到页面的内容，提升用户体验。其次，Lazyload 可以减少待加载资源的数量，节省网络带宽，降低服务器的负载压力。 总的来说，Lazyload 页面可视化加载是一种有效优化网页加载速度的技术，通过只加载用户当前可见区域的内容，可以提升用户体验，减少网络带宽的占用。在实际开发中，可以根据具体情况选择适合的实现方式，以达到最佳的效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值