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

た入场券 2022-05-19 05:12 68阅读 0赞

以下内容来自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 = "灯火">
    				<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>
    
    	
    	<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();
    		}
    	}
    }

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

![70][]

图片库：

![70 1][]![70 2][]![70 3][]

[70]: /images/20220519/363f025bc34943a08aecf47e3905dfd3.png
[70 1]: https://img-blog.csdn.net/20180720182225228?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdqaWFuNTMw/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 2]: https://img-blog.csdn.net/20180720182250133?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdqaWFuNTMw/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 3]: /images/20220519/cc9a5a1b82924a969ea9fabc034c6ea7.png

发表评论取消回复

表情：

评论列表（有 0 条评论，68人围观）

还没有评论，来说两句吧...

相关阅读

相关 Scala系列17：样例类，样例对象以及样例方法使用详解

目录 0.样例类 0.1定义样例类语法 0.2示例 | 定义一个样例类 1.样例类的方法 1.1 apply方法 1.2 toString方法 1.3 equa

蔚落/ 2022年12月04日 03:26/ 0 赞/ 275 阅读

相关 html 布局兼容性,flex布局兼容性问题小结

一.W3C各个版本的flex 2009 version 标志：display: box; or a property that is box-\{\\} (eg. box-

た入场券/ 2022年10月11日 13:38/ 0 赞/ 317 阅读

相关 node.js的redis模块样例

/ Created with JetBrains WebStorm. User: hexie Date: 12-12-13

朱雀/ 2022年08月26日 00:57/ 0 赞/ 98 阅读

相关 firefox与ie的javascript兼容性编程汇编

1. document.formName.item("itemName") 问题说明:IE 下, 可以使用document.formName.item("i

àì夳堔傛蜴生んèń/ 2022年08月23日 14:57/ 0 赞/ 187 阅读

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

以下内容来自JavaScript DOM编程艺术，我做了一些学习笔记： html代码： <!DOCTYPE html> <html lang="en">

た入场券/ 2022年05月19日 05:12/ 0 赞/ 69 阅读

相关 JavaScript 事件兼容性

通常，我们为某个控件元素添加事件时，用的是： ele.onclick=fn1(){}; 或者 ele.onclick=fn1; //此时不需要加括号

绝地灬酷狼/ 2022年05月01日 12:02/ 0 赞/ 296 阅读

相关 HTML图片兼容性

开发工具与关键技术：DW 作者：文泽钦撰写时间：2019年1月16日星期三目标：解决图片在浏览加载不了的问题在HTML开发中为了使布局更加美观，一般情况下都会

我会带着你远行/ 2022年03月26日 09:08/ 0 赞/ 254 阅读

相关 JavaScript 事件兼容性写法

<!DOCTYPE html> <html> <head> <meta charset="UTF-8">

青旅半醒/ 2022年03月06日 12:24/ 0 赞/ 280 阅读

相关 JS兼容性处理

1. [百度 - 终端适配API][-_API] 适合服务器端使用。POST客户端传递的http头信息越多，得到的适配信息越准确。百度返回的数据为：

落日映苍穹つ/ 2022年01月09日 06:51/ 0 赞/ 279 阅读

相关原生JS的兼容性问题

1.关于获取行外样式 currentStyle 和 getComputedStyle 出现的兼容性问题　封装一个获取行外样式的函数:(兼容所有浏览器,包括低版本IE6,7)

妖狐艹你老母/ 2021年12月12日 00:23/ 0 赞/ 274 阅读