javascript图片库样例的html与js分离，以及兼容性优化（支持平稳退化）-CSDN博客

本文链接：https://blog.csdn.net/wangjian530/article/details/81136930

以下内容来自JavaScript DOM编程艺术，我做了一些学习笔记：

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>图片库(JS平稳退化)</title>
	<link rel="stylesheet" href="../css/pic.css">
</head>
<body>
	<h1>Snapshots</h1>
	
	<ul id="imagegallery">
		<li style="margin-left: 5px; margin-top: 10px;">
			<a href="../images/2.jpg" title = "灯火"><!-- this表示这个对象，当showPic()被调用的时，点击链接，用户还是会被带到图片查看窗口，为了阻止这个默认行为被调用，return false -->
				<img style="width: 15%;" src="../images/2.jpg">
			</a>
		</li>
		<li style="margin-left: 500px; margin-top: -80px;">
			<a href="../images/3.jpg" title = "夜空">
				<img style="width: 25%;" src="../images/3.jpg">
			</a>
		</li>
		<li style="margin-left: 1024px; margin-top: -88px;">
			<a href="../images/4.jpg" title = "城市">
				<img style="width: 63%;" src="../images/4.jpg">
			</a>
		</li>
	</ul>
	<br><br><br><br><br>

	<!-- 设置“占位符”图片替换为想要查看的图片，需要通过JS中的setAttribute()改变它的src属性 -->
	<img style="width:100%;" id="placeholder" src="../images/1.jpg" alt="picture">
	<p id="description">Choose an image.</p>

	
	<script src = "../js/pic improve.js" type="text/javascript"></script>
	<script type="text/javascript">
		addLoadEvent(prepareGallery);
	</script>

</body>
</html>

js代码：


function showPicOld(whichpic) {
	var source = whichpic.getAttribute("href");
	var placeholder = document.getElementById("placeholder");
	placeholder.setAttribute("src",source);
	var text = whichpic.getAttribute("title");
	var description = document.getElementById("description");
	description.firstChild.nodeValue = text;
}


// 通过该函数将js与html分离，且在该函数中做出了多处优化设计
function prepareGallery() {
	// 检查当前浏览器是否理解getElementsByTagName
	if (!document.getElementsByTagName) return false;
	// 检查当前浏览器是否理解getElementsById
	if (!document.getElementById) return false;
	// 检查当前网页是否存在一个id为imagegallery的元素
	if (!document.getElementById("imagegallery")) return false;
	var gallery = document.getElementById("imagegallery");
	var links = gallery.getElementsByTagName("a");
	// 遍历imagegallery元素中的所有链接
	for ( var i = 0; i < links.length; i++) {
		// 设置onclick事件，让它在有关链接被点击时完成以下操作：
			// 把这个链接作为参数传递给showPic函数
			// 取消链接被点击时的默认行为，不让浏览器打开这个链接。而同时在showPic函数调用失败时，又允许链接点击行为的平稳退化。
		links[i].onclick = function() {
			return showPic(this) ? false : true;
		}
	}
}
 
function showPic(whichpic) {
	// 检查当前网页是否存在一个id为placeholder的元素
	if (!document.getElementById("placeholder")) return false;
	var source = whichpic.getAttribute("href");
	var placeholder = document.getElementById("placeholder");
	// 检查placeholder元素的nodeName是否为IMG
	if (placeholder.nodeName != "IMG") return false;
	placeholder.setAttribute("src",source);
	// 检查description元素是否存在
	if (document.getElementById("description")) {
		// 检查title属性是否存在，利用三元操作符为找不到title属性时text变量的值为空字符串
		var text = whichpic.getAttribute("title") ? whichpic.getAttribute("title") : "";
		var description = document.getElementById("description");
		// 检查description元素的第一个子元素节点nodeType是否是文本节点
		if (description.firstChild.nodeType == 3) {
			description.firstChild.nodeValue = text;
		}	
	}
	return true;
}


// 网页链接的预处理函数需要在页面一加载完，就进行调用处理
function addLoadEvent(func) {
	var oldonload = window.onload;
	if (typeof window.onload != 'function') {
		window.onload = func;
	} else {  
		window.onload = function() {
			oldonload();
			func();
		}
	}
}

话不多说我们来看效果图：
主页：