本文将介绍如何利用JavaScript创建图片库，减少页面加载数据量，提升用户体验。通过HTML代码实例展示如何在网页中链接图片，并使用javascript实现图片懒加载功能，确保页面加载速度。同时讨论了图片资源管理的重要性及最佳实践。
1、先来展示效果：
点击GIRL出现相对应的图片。
重点：这样做的原因：
如果把图片放到网页里，就过于庞大，用户要下载的数据量就相当可观了，没有人去愿意等待下载一个页面吧？
所以要创建javascript图片库。
2、HTML代码
<body>
<h1>LIST</h1>
<ul>
<li><a href="img2.jpg" onclick="lister(this); return false;" name="girl" title="Beautiful Girl">GIRL</a></li>
...
</ul>
</body>3、javascript代码：
<script type="text/javascript">
function lister(picName){
var source = picName.getAttribute("href");
var imger = document.getElementById("imger");
imger.setAttribute("src",source);
}
</script>
扫一扫
1454
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
