懒加载（js+图片+路由）

已于 2022-04-10 22:27:30 修改
阅读量917 收藏
点赞数
分类专栏： 面试题 文章标签： 懒加载
于 2022-04-09 17:12:06 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36582776/article/details/124061992
版权
本文介绍了懒加载的概念，包括js懒加载通过defer和async属性实现，图片懒加载利用data-src和scroll事件监听，以及路由懒加载在vue项目中的三种实现方式：Vue异步组件、ES6 import() 和 webpack 的 require.ensure()。同时，文章提到了vue-lazyload插件以及原生js中判断元素是否可见的方法。
摘要由CSDN通过智能技术生成

js懒加载：

js通过设置defer和async

图片懒加载：

当载入页面时，先把可视区域内的img标签的data-src（自定义属性，真实图片源）属性值负给src，其他未在可视区域的图片的src赋值默认图片地址。然后监听滚动事件，把用户即将看到的图片加载(img[i].offsetTop < seeHeight + scrollTop)。注意图片要指定宽高，否则引起回流。而且要给scroll事件进行节流处理，否则会频繁触发。

插件：vue-lazyload 、IntersectionObserver API

   IntersectionObserver 可以自动"观察"元素是否可见，Chrome 51+ 已经支持。由于可见（visible）的本质是，目标元素与视口产生一个交叉区，所以这个 API 叫做交叉观察器。

原生js :e.offsetTop < document.body.clientHeight + document.body.scrollTop


                

        

        

    




        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  七彩冰淇淋与藕汤
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    0
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
如何用js实现路由懒加载

				
			

			

				

					XiehaiyanLI的博客
				

				

					09-18
					
					597
					
				

			

		

		

			
				
概念


什么是懒加载？
懒加载顾名思义突出一个“懒”字，懒字就是拖延的意思，说白就是延迟加载。比如我们进入一个新的页面进行加载的时候，这个页面很长超过了屏幕可视区域的时候，那么懒加载就会优先加载我们可视区域可见的内容,剩余部分是当进入到可视区域之后再进行加载。


为什么要懒加载？
懒加载是一种优化网页性能的一种方式，它极大的提高了用户的体验。举个栗子：就拿图片来说，一个网站，单个网页的页面上“图片”是构成页面主体的一个极大部分，但是在现在一张图片的大小超过几兆是一件很正常的事，那么就需要注意到一个问题：

			
		

	



                

              
                



	

		

			

				
					
路由懒加载和图片懒加载

				
			

			

				

					weixin_42713144的博客
				

				

					09-14
					
					813
					
				

			

		

		

			
				
懒加载
在项目中为了优化加载速度和节约资源，会使用懒加载这一概念。
下面例子是基于vue框架实现的懒加载。
路由懒加载
vue项目实现路由按需加载(路由懒加载)的3种方式 - 简书 (jianshu.com)
路由懒加载 | Vue Router (vuejs.org)
常用方法：es规范的import()
注意：webpackChunkName可以把某个路由下的所有组件都打包在同个异步块 (chunk) 中
图片懒加载
懒加载原理是什么
先将 img 标签中的src链接设为同一张图片（空白图片），将其真正

			
		

	



                


  
              

                


	

		

			

				
					
图片懒加载和Vue路由懒加载

				
			

			

				

					下雨打伞干嘛的博客
				

				

					01-06
					
					807
					
				

			

		

		

			
				
图片懒加载和Vue路由懒加载

			
		

	





	

		

			

				
					
10、图片的路由懒加载

				
			

			

				

					weixin_44195250的博客
				

				

					09-20
					
					134
					
				

			

		

		

			
				
问题
解决原因
安装
  npm install vue-lazyload --save-dev 


成功




			
		

	



		

			
		



	

		

			

				
					
vue缓存路由.懒加载，图片懒加载,日期库

				
			

			

				

					荔枝吖阿
				

				

					02-13
					
					707
					
				

			

		

		

			
				
   

 

一.缓存路由对象（缓存在浏览器内存中）  &lt;keep-alive/&gt;

      vue2.0提供了一个keep-alive组件来缓存组件，避免多次加载相应的组件，消耗性能。

   一般有这样的需求，当我们第一次进入列表页需要请求下数据，在从列表页进入详情页，详情页不缓存也需要请求数据，然后返回列表页，这时可以用keep-alive组件。

  分析所以有三种情况：...

			
		

	





	

		

			

				
					
Vue.js如何实现路由懒加载浅析

				
			

			

				

					12-03
				

			

		

		

			
				
懒加载也就是延迟加载，不知道大家在工作中有没有发现，当你的SPA（单页应用程序）变得复杂时，打包构建后的Javascript包会变得非常大，以至于严重影响页面的加载时间。幸运的是：vue-router支持WebPack内置的异步...

			
		

	





	

		

			

				
					
vue路由懒加载的实现方法

				
			

			

				

					08-27
				

			

		

		

			
				
3. 路由懒加载的使用：在main.js文件中，我们可以使用template语法或render函数来使用路由懒加载。 ``` new Vue({  el: '#app',  router,  components: { App },  render() {  return (    <App></App>    )  } }) `...

			
		

	





	

		

			

				
					
React 路由懒加载的几种实现方案

				
			

			

				

					10-17
				

			

		

		

			
				
React 路由懒加载是优化Web应用性能的重要策略，它允许我们在用户实际访问特定路由时才加载对应的组件，而不是一次性加载所有代码。这减少了初始加载时间，提升了用户体验。以下是React路由懒加载的几种实现方案：  ...

			
		

	





	

		

			

				
					
不知道vue路由懒加载，进来看看吧

				
			

			

				

					01-08
				

			

		

		

			
				
一、是什么 路由：即url，vue中一个url对应一个组件 懒加载：用到时，再加载 二、为什么有 前端发展到了单页面富应用(SPA)阶段(整个网站只有一个html+css+js) 当打包构建应用时，js包...五、路由懒加载效果  懒加载方式

			
		

	





	

		

			

				
					
路由守卫、图片懒加载、路由懒加载

				
			

			

				

					m0_60376759的博客
				

				

					08-15
					
					240
					
				

			

		

		

			
				
如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。只能去拦住固定的往某个页面跳转的，是配置在组件内部，也就是路由匹配已经完成了，时间比较靠后。的是import函数引入模块，webpack会把引入的模块进行单独打包，后期当我们第一次访问哪个。当路由跳转的时候，这个守卫可以去拦住，检测你是否有去往这个页面的条件。引入的模块一起打包，打包到一个大的文件当中，而且这种引入方式只能写在文件的最上面。拦截路由，查看是否满足条件，满足的放行，不满足的处理。...

			
		

	





	

		

			

				
					
vue实现路由懒加载及组件懒加载的方式

				
			

			

				

					10-16
				

			

		

		

			
				
懒加载简单来说就是延迟加载或按需加载，即在需要的时候的时候进行加载。这篇文章主要介绍了vue路由懒加载及组件懒加载 ,需要的朋友可以参考下

			
		

	





	

		

			

				
					
图片懒加载、路由懒加载

					
最新发布

				
			

			

				

					m0_58118986的博客
				

				

					11-22
					
					180
					
				

			

		

		

			
				
font-face// 路由配置// 异步加载组件的函数component: import('./AsyncComponent.vue'),//必写，其他的是可写项loading: LoadingComponent, // 加载时显示的组件error: ErrorComponent, // 加载失败时显示的组件delay: 200, // 延迟显示加载组件的时间timeout: 1000 // 加载超时时间});

			
		

	





	

		

			

				
					
懒加载在图片，路由和组件上的应用

				
			

			

				

					qq_45775962的博客
				

				

					05-24
					
					145
					
				

			

		

		

			
				
懒加载
懒加载是什么样的一种技术？

也叫延迟加载，简单理解就是用户滚动到它们之前，可视范围外的内容会先不加载

引入：
一些电商平台或者是现在的一些新闻网页，当我们需要看到看后面的新闻，我们会做一个下滑的操作，这时候会有一个加载内容的操作
结论：
我们把这种后面用上才加载的技术叫做懒加载
懒加载起到一个什么样的作用？
不使用懒加载技术会如何？
一般vue项目由webpack打包后文件会非常大，这会造成进入首页时需要加载的内容过多，延时过长，白屏的时间过长【白屏时间和浏览器机制有关，后面会有文章讲讲这方面】

			
		

	





	

		

			

				
					
vue项目优化【缓存路由组件对象、路由组件懒加载、图片懒加载、打包文件分析与优化】

				
			

			

				

					weixin_43837268的博客
				

				

					01-06
					
					217
					
				

			

		

		

			
				
1. 缓存路由组件对象




<keep-alive>
<router-view />
</keep-alive>

好处: 复用路由组件对象, 复用路由组件获取的后台数据 





2. 路由组件懒加载 



src/router/index.js



// import MSite from '../pages/MSite/MSite.vue'
// import Search from '../pages/Search/Search.vue'
/...

			
		

	





	

		

			

				
					
React图片懒加载和路由懒加载的简单介绍

				
			

			

				

					你是我修复不了的bug，但我会用一生去维护
				

				

					12-29
					
					613
					
				

			

		

		

			
				
React图片懒加载和路由懒加载的使用
1. 路由懒加载
路由懒加载实现代码分隔，可以将代码拆分视为增量下载应用程序。

安装：

npm install @loadable/component 


使用：

import loadable from '@loadable/component'
const LoadDemoComponent = loadable(() => import('./components/Demo.jsx'))
function App() {
  return (
  

			
		

	





	

		

			

				
					
图片、数据、路由的懒加载

				
			

			

				

					m0_67464753的博客
				

				

					07-14
					
					293
					
				

			

		

		

			
				
图片（数据）正式进入到可视区中时，才加载对应的图片（数据），否则不请求图片（数据）数据的懒加载与图片的方法差不多，将内部的图片换成数据请求即可。

			
		

	





	

		

			

				
					
性能优化-懒加载（图片 组件 路由）

				
			

			

				

					肥晨开发的学习之路
				

				

					06-02
					
					143
					
				

			

		

		

			
				
为什么需要懒加载？
   组件、图片、路由对页面加载速度影响非常大。比如，当一个页面内容比较多的时候，加载速度就会大大的降低，极大的影响到用户体验 。更有甚者，一个页面可能会有几百个图片，但是页面上仅仅只显示前几张图片，那其他的图片是否可以晚点加载用于提高性能。
什么是懒加载？
   懒加载也叫延迟加载，即在需要的时候进行加载，随用随载。在vue中组件懒加载又称为代码分割，也叫延迟加...

			
		

	





	

		

			

				
					
react图片懒加载和路由懒加载的使用

				
			

			

				

					weixin_46392334的博客
				

				

					08-03
					
					574
					
				

			

		

		

			
				
一、路由懒加载实现代码分割，让组件按需加载，优化项目性能。
1、路由文档里面有详细介绍：https://reactrouter.com/web/guides/code-splitting
安装：npm install @loadable/component -S
使用语法:
安装好后引入组件的时候就这样引入就可以了
const Home = loadable(() =>import ( ‘/home’))

2、如果遇到eslint报错就安装这个插件（自己搭建脚手架不需要）：
1、安装：
npm in

			
		

	





	

		

			

				
					
图片懒加载和预加载

				
			

			

				

					二熊不是熊二的博客
				

				

					03-01
					
					223
					
				

			

		

		

			
				
图片懒加载和预加载
参考：https://www.cnblogs.com/psxiao/p/11542930.html
预加载：提前加载图片，当用户需要查看时可直接从本地缓存中渲染。
懒加载：懒加载的主要目的是作为服务器前端的优化，减少请求数或延迟请求数。
两种技术的本质：两者的行为是相反的，一个是提前加载，一个是迟缓甚至不加载。
懒加载对服务器前端有一定的缓解压力作用，预加载则会增加服务器前端压...

			
		

	





	

		

			

				
					
路由懒加载

				
			

			

				

					05-26
				

			

		

		

			
				
路由懒加载是指在使用Vue.js等前端框架开发网站时，将每个路由对应的组件打包为单独的异步块，在用户访问该路由时再加载对应的组件。这种方式可以有效减少网站的初始加载时间，提升网站的性能和用户体验。  在Vue.js...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值