Easyui-tabs延迟加载：同一个界面嵌套多个Tab，点击/选中后才执行加载

思涛的博客

已于 2023-05-30 22:11:12 修改

阅读量562

点赞数 1

分类专栏：前端文章标签： easyui 前端 javascript

于 2023-05-30 22:05:03 首次发布

本文链接：https://blog.csdn.net/crazestone0614/article/details/130957945

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

我们通常在一个主框架界面会嵌套多个Tabs, 当在浏览器打开该页面，会导致多个Tabs同时候请求页面数据，这样处理不但会给后台的数据库造成比较大的压力，同时也比较浪费流量。所以有必要实现这样的效果：同一个界面嵌套多个Tab，点击/选中后才执行加载。下面是两种实现方案的对比：

一、同时加载所有Tabs

<!-- ifame的'src'如果赋值，则会自动发起请求，下面每个iframe的src都有初始值，相当于所有的tabs都会同时加载 -->
<div class="easyui-tabs" style="width:100%; height:100%" data-options="region:'center', tabPosition:'top', fit:true, border:false">
	
			<div title="数据统计" data-options="tabWidth:112" style="padding:0px">
				<iframe id="statis" scrolling="no" frameborder="0"  src="${ctx}/admin/statis" style="width:100%; height:100%;"></iframe>
			</div>
			
			<div title="首页轮播" data-options="tabWidth:112" style="padding:0px">
				<iframe id="banner" scrolling="no" frameborder="0"  src="${ctx}/admin/banner" style="width:100%; height:100%;"></iframe>
			</div>
			
			<div title="首页频道" data-options="tabWidth:112" style="padding:0px">
				<iframe id="channel" scrolling="no" frameborder="0"  src="${ctx}/admin/channel" style="width:100%; height:100%;"></iframe>
			</div>
			
			<div title="教材目录" data-options="tabWidth:112" style="padding:0px">
				<iframe id="category" scrolling="no" frameborder="0"  src="${ctx}/admin/category" style="width:100%; height:100%;"></iframe>
			</div>
			
			<div title="教材管理" data-options="tabWidth:112" style="padding:0px">
				<iframe id="content" scrolling="no" frameborder="0"  src="${ctx}/admin/material" style="width:100%; height:100%;"></iframe>
			</div>
			
</div>

二、点击/选中Tab后才加载

<%@ page language="java" pageEncoding="utf-8" isELIgnored="false"%>
<html>
<head>
<title>后台信息管理</title>
<%@ include file="/common/meta.jsp"%>
<link href="${ctx}/css/style.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript">

	$(function() {
		initTabs();
	});
	
	//延迟加载tab，避免所有tabs同时请求加载页面
	//参考1：https://my.oschina.net/u/2331760/blog/5481398
	//参考2：https://blog.csdn.net/weixin_30251587/article/details/96632084
	function initTabs() {
		
		var url = "";
	 	$("#tabs").tabs({
			onSelect:function(title,index){
				
				var tab = $(this).tabs('getTab', index);
				var tabName = $(tab).panel("options").title;
				//alert(tabName);
				switch(tabName){
					case '数据统计':
	                    url = "${ctx}/admin/statis";
						break;
					case '首页轮播':
						url = "${ctx}/admin/banner";
						break;
					case '首页频道':
						url = "${ctx}/admin/channel";
						break;
					case '教材目录':
						url = "${ctx}/admin/category";
						break;
					case '教材管理':
						url = "${ctx}/admin/material";
						break;
				}
				
				if (!checkInitIframe(tab) || !isSameIframe(tab,url)){
					//如果tab没有url,或者和前一个url不是同一个,则刷新iframe
					refreshMyTab(tab,url);
				}
			},
			
			onUnselect:function(title,index){
			}
			
		});
	} 
	
	
	//根据指定url刷新iframe
	function refreshMyTab(tab,src){
		$(tab.find('iframe')[0]).attr('src',src);
	}
	
	//判断iframe是否有url,即iframe是否已经初始化
	function checkInitIframe(tab){
		return $(tab.find('iframe')[0]).attr('src');
	}
	
	//判断iframe的url是否和最新的url是否相同
	function isSameIframe(tab,src){
		if($(tab.find('iframe')[0]).attr('src') == src){
			return true;
		}
		return false;
	}

</script>

</head>

<body>
		
		<!-- ifame的src如果赋值，则会自动发起请求，下面第一个iframe的src有初始值，会自动加载，其余都没有初始值，只有在tab选中后，才对src赋值并加载页面，相当于延迟加载 -->
		<div id="tabs" class="easyui-tabs" style="width:100%; height:100%" data-options="region:'center', tabPosition:'top', fit:true, border:false">
	
			<div title="数据统计" data-options="tabWidth:112" style="padding:0px">
				<iframe id="statis" scrolling="no" frameborder="0"  src="${ctx}/admin/statis" style="width:100%; height:100%;"></iframe>
			</div>
			
			<div title="首页轮播" data-options="tabWidth:112" style="padding:0px">
				<iframe id="banner" scrolling="no" frameborder="0"  src="" style="width:100%; height:100%;"></iframe>
			</div>
			
			<div title="首页频道" data-options="tabWidth:112" style="padding:0px">
				<iframe id="channel" scrolling="no" frameborder="0"  src="" style="width:100%; height:100%;"></iframe>
			</div>
			
			<div title="教材目录" data-options="tabWidth:112" style="padding:0px">
				<iframe id="category" scrolling="no" frameborder="0"  src="" style="width:100%; height:100%;"></iframe>
			</div>
			
			<div title="教材管理" data-options="tabWidth:112" style="padding:0px">
				<iframe id="content" scrolling="no" frameborder="0"  src="" style="width:100%; height:100%;"></iframe>
			</div>
	
		</div>

</body>
</html>

思涛的博客

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
1
评论
Easyui-tabs延迟加载：同一个界面嵌套多个Tab，点击/选中后才执行加载

我们通常在一个主框架界面会嵌套多个Tabs, 当在浏览器打开该页面，会导致多个Tabs同时候请求页面数据，这样处理不但会给后台的数据库造成比较大的压力，同时也比较浪费流量。所以有必要实现这样的效果：同一个界面嵌套多个Tab，点击/选中后才执行加载。
复制链接

扫一扫