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

た入场券 2022-05-19 05:12 110阅读 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 条评论，110人围观）

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

相关阅读

相关 HTML5浏览器支持及兼容性处理

1、现代的浏览器都支持HTML5。 2、所有浏览器不管是新的还是旧的对无法识别的元素会作为内联元素自动处理。 3、HTML5定义了8个HTML语义元素，所有这些元素都是块级

短命女/ 2023年07月22日 04:57/ 0 赞/ 100 阅读

相关 html分离JavaScript

[ html分离JavaScript][html_JavaScr

た入场券/ 2023年03月12日 16:25/ 0 赞/ 37 阅读

相关 js遮幕的样例

基于ACE 具体css js样式可以参考fms-proxyInvoice-admin.zip，上传资源。 parse("common/header.vm")

小灰灰/ 2023年02月10日 03:59/ 0 赞/ 13 阅读

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

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

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

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

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

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

相关 node.js的redis模块样例

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

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

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

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

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

相关 JavaScript 事件兼容性

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

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

相关 HTML图片兼容性

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

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

相关 JS兼容性处理

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

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