原生JavaScript实现懒加载

最新推荐文章于 2024-06-20 20:20:21 发布
最新推荐文章于 2024-06-20 20:20:21 发布
阅读量117 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/beau30/p/6958786.html
版权

源码工程下载地址：https://github.com/blff122620/jsLibary/lazyLoad.html

实现原理就是通过scroll事件判断元素是否已经进入viewport

导入

lazyLoad.js

使用

inViewPort(item)即可 判断item是否在视口里，然后继续进行自己的逻辑就行了
<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <title>图片懒加载</title>
    <link rel="stylesheet" href="./static/css/reset.css">
    <link rel="stylesheet" href="./static/css/global.css">
    <style>
    .content {
        /*height: 1500px;*/
        width: 100%;
        overflow: hidden;
    }
    
    .content>img {
        border-radius: 5px;
        display: inline-block;
        margin: 200px 0 0 200px;
        
        width: 235px;
    }
    </style>
</head>

<body>
    <div class="content bg1" id="js-imgdiv">
        <img src="./static/img/lazyDefault.jpg" data-url="./static/img/1.jpg" alt="" >
        <img src="./static/img/lazyDefault.jpg" data-url="./static/img/2.jpg" alt="" >
        <img src="./static/img/lazyDefault.jpg" data-url="./static/img/3.jpg" alt="" >
        <img src="./static/img/lazyDefault.jpg" data-url="./static/img/4.jpg" alt="" >
        <img src="./static/img/lazyDefault.jpg" data-url="./static/img/5.jpg" alt="" >
        <img src="./static/img/lazyDefault.jpg" data-url="./static/img/6.jpg" alt="" >
    </div>

    <script type="text/javascript" src="./static/js/util.js"></script>
    <script type="text/javascript" src="./static/js/lazyLoad.js"></script>
    <script>
    (function() {
        window.onload=function(){

            var pics = $$("#js-imgdiv>img");
            setPicSrc(pics);
            window.onscroll = function(){
                setPicSrc(pics);
            };
            function setPicSrc(pics){
                pics.forEach(function(item){
                    if(inViewPort(item)){
                        setTimeout(function(){
                            item.src = item.dataset.url;
                        },200);//模拟一下网速慢的情况 
                    };   
                });
                        
            }

        };
    }());
    </script>
</body>

</html>

 

转载于:https://www.cnblogs.com/beau30/p/6958786.html

baitao1983
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端表格懒加载
HuangZeJunXXX的博客
12-02 1587
那如何判断滚动条滚到底部了呢？ scrollHeight-scrollTop-clientHeight=0，这个时候可以就是滚动条滚到底部的时候了。 在第一次请求数据的时候，先设置一个变量来记录请求次数（其实后台也是做分页的处理） this.currentPage = 1, this=this;this.this = this; this.this=this;this.axios.fun().th...
原生javaScript实现图片延时加载的方法
10-25
主要介绍了原生javaScript实现图片延时加载的方法,无需通过载入jQuery脚本即可实现图片的延时加载效果,是非常实用的技巧,需要的朋友可以参考下
原生JS实现图片懒加载（详解）————小白都能看的懂
weixin_43809685的博客
07-01 575
原生JS实现图片懒加载（详解）—— 小白都能看的懂 什么是图片懒加载： 图片懒加载，通俗一点就是图片的延迟加载。它是页面性能优化的一种手段，在加载页面时通过只显示可视区域的图片，避免了页面因图片过多而使得页面加载缓慢甚至卡顿的问题。 实现的基本原理： 通过判断当前图片的【offsetTop】值，来动态添加【img】标签，设置【img】标签的【src】属性。 我们知道了什么是图片懒加载和它实现的基本...
[译] 深入理解图片和框架的原生懒加载功能
weixin_33842328的博客
06-08 641
原文地址：A Deep Dive into Native Lazy-Loading for Images and Frames 原文作者：Erk Struwe 译文出自：掘金翻译计划 本文永久链接：github.com/xitu/gold-m… 译者：Baddyo 校对者：Mcskiller 当今的网站上充斥着大量媒体资源，例如图片和视频。图片约占网站平均通信量的 50%。然而这些图片中的...
JavaScript实现图片懒加载(超简单！！)
词不达意难知的博客
08-04 2186
懒加载的概念：先只加载可视区的内容，当用户向下滚动时，再继续加载后面的内容。 懒加载的好处： 1）减少加载时的线程数据，可以使可视区内的图片快速加载 2）减少了同一时间发送到服务器的请求数量，减轻服务器压力 JS代码展示 <script> // 获取图片 var oImg = document.getElementsByTagName('img'); ...
JavaScript实现懒加载
weixin_51422386的博客
12-05 3016
项目性能优化
原生JS JavaScript实现懒加载效果
qq_39693468的博客
12-02 2175
我是一名接触编程不久的小白，今天为大家带来这个案例，希望可以帮助到你。 懒加载是现在常见的的一种加载方式，是滑动到一定距离才加载新的数据，这样可以减少设备内存的负担。 话不多说，开始展示吧. ...
原生JS实现图片懒加载之页面性能优化
10-17
本文将深入探讨如何使用原生JavaScript实现图片懒加载，以及这种方式如何帮助优化页面性能。 一、图片懒加载原理 1. 数据存储：首先，我们需要为图片`<img>`标签添加一个自定义属性，如`data-src`，用来存储实际的...
原生javascript页面图片懒加载代码
03-21
原生javascript页面图片懒加载效果
LazyLoad原生JavaScript实现的懒加载库兼容到IE8
08-12
LazyLoad 原生 JavaScript 实现的懒加载库，兼容到 IE8
原生JS实现图片懒加载(lazyload)实例
10-19
原生JavaScript实现的图片懒加载方案并不复杂，但需要理解其核心原理和关键代码。 首先，实现懒加载的基本思路是：在页面初始化时，非首屏的图片的`src`属性设置为一个默认的占位符，如加载中的图片或者一张小尺寸...
js原生实现高性能懒加载(分步解析)
热门推荐
weixin_40821790的博客
12-07 1万+
小弟不才,自己做了一个简单的懒加载,为了节约 window.onscroll的次数 ,提高性能, 设计了函数节流和函数防抖两种模式 , 后面想到更好的方法会更新,也请各位朋友多多指点!! :D 废话不多说,直接亮代码~~1.简单懒加载:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Docu
Day43
最新发布
m0_67496588的博客
06-20 690
JSON，Ajax
工具链--nuxt框架 简介（一）
qq_35876316的博客
06-16 369
Nuxt框架是一个基于Vue.js的服务器端渲染（SSR）框架，旨在提供一套完整的前端开发解决方案，帮助开发者构建高性能、可扩展的Web应用。是一个功能强大、易于使用的Web开发框架，适用于多种开发场景和需求。Nuxt框架建立在Vue.js之上，它抽象出了管理异步数据、中间件和路由所涉及的大部分复杂配置。Nuxt不仅继承了Vue.js的所有优点，如易用性、灵活性等，还与Node.js紧密集成，使得开发者可以在项目中轻松地使用Node.js的各种功能。
一个很好用的地图工具的使用：思极地图，以及vue+思极地图的使用
浩星
06-18 380
思极地图，给我们带来了很多便利，这里分享下他的信息与使用。
【element 】修改下拉菜单＜el-dropdown样式为横向（超简单）
qq_61798306的博客
06-18 256
【element 】修改下拉菜单
vue格网图
南北粉面馆
06-16 322
【代码】vue格网图。
原生js实现图片懒加载的源码
03-29
以下是原生js实现图片懒加载的源码： ```javascript // 获取所有需要懒加载的图片元素 const lazyImages = document.querySelectorAll("img.lazy"); // 判断图片是否在可视区域内 function isInViewport(image) { const rect = image.getBoundingClientRect(); return ( rect.top >= 0 && rect.left >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && rect.right <= (window.innerWidth || document.documentElement.clientWidth) ); } // 加载图片 function loadImage(image) { image.src = image.dataset.src; image.classList.remove("lazy"); } // 监听window的滚动事件 window.addEventListener("scroll", function () { // 遍历需要懒加载的图片元素 for (const image of lazyImages) { if (isInViewport(image)) { loadImage(image); } } }); ``` 首先，我们获取所有需要懒加载的图片元素： ```javascript const lazyImages = document.querySelectorAll("img.lazy"); ``` 接着，我们定义一个函数`isInViewport`用于判断图片是否在可视区域内。该函数会返回一个布尔值，表示图片是否在可视区域内： ```javascript function isInViewport(image) { const rect = image.getBoundingClientRect(); return ( rect.top >= 0 && rect.left >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && rect.right <= (window.innerWidth || document.documentElement.clientWidth) ); } ``` 然后，我们定义一个函数`loadImage`用于加载图片。该函数会将图片的`src`属性设置为`data-src`属性的值，并移除`lazy`类： ```javascript function loadImage(image) { image.src = image.dataset.src; image.classList.remove("lazy"); } ``` 最后，我们监听`window`的滚动事件，遍历所有需要懒加载的图片元素，如果图片在可视区域内，则调用`loadImage`函数加载图片： ```javascript window.addEventListener("scroll", function () { for (const image of lazyImages) { if (isInViewport(image)) { loadImage(image); } } }); ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值