请问一下老师，用控制src属性路径的方法和视频老师所教的，在性能上有什么区别
来源：3-4 行为层
MyFiver
2020-04-22 09:28:15
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0px;
margin: 0px;
border: none;
}
body{
background: skyblue;
width: 100%;
}
nav{
position: relative;
display: flex;
width: 80%;
min-width: 1000px;
margin: 45px auto 45px;
justify-content: space-between;
}
nav:before{
width: 98%;
height: 10px;
content: "";
position:absolute;
margin-top: 16px;
display: block;
background: white;
}
nav>a{
position: relative;
text-decoration: none;
color: black;
background: white;
padding: 10px;
border: 1px solid gray;
}
div{
position: relative;
width: 80%;
min-width: 1000px;
height: 500px;
background-color: white;
margin: 0px auto 45px;
}
div>img{
position: absolute;
width: 98%;
height: 96%;
top: 0; right: 0; bottom: 0; left: 0;
margin: auto;
}
</style>
</head>
<body>
<nav>
<a href="#">泸沽湖</a>
<a href="#">丽江古城</a>
<a href="#">茶马古道</a>
<a href="#">就这家·云逸客栈</a>
<a href="#">西双版纳</a>
<a href="#">云南红酒庄</a>
<a href="#">轿子雪山</a>
<a href="#">普者黑</a>
<a href="#">海埂大坝</a>
<a href="#">玉龙湾</a>
</nav>
<div>
<img src="img/1.jpg" alt="">
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
jQuery("a").mouseover(function () {
var imgNum=$(this).index()+1;
$('img').attr('src','img/'+imgNum+'.jpg')
});
</script>
</body>
</html>
1回答
-
同学你好，两种方式的区别如下：
1、老师的写法是在打开页面时，就加载所有的图片，之后的操作只是简单地显示和隐藏。
2、同学的写法是在显示哪一张图片时，才加载对应的图片。
由上述区别可知，如果图片不多的话，两种方式在性能上差别不大，如果图片很多的话，那么使用同学的方式，性能上相对更好一点。
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
0
相似问题