平稳退化的应用举例

时间:2021-11-25 22:53:34

html文件:

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Image Gallery</title>
<script type="text/javascript" src="scripts/showPic.js"></script>
</head>
<body>
<h1>Snapshots</h1>
<ul id="imagegallery">
<li>
<a href="images/fireworks.jpg" title="A fireworks display">Fireworks</a>
</li>
<li>
<a href="images/coffee.jpg" title="A cup of black coffee" >Coffee</a>
</li>
<li>
<a href="images/rose.jpg" title="A red, red rose">Rose</a>
</li>
<li>
<a href="images/bigben.jpg" title="The famous clock">Big Ben</a>
</li>
</ul>
<img id="placeholder" src="images/placeholder.gif" alt="my image gallery" />
<p id="description">Choose an image.</p>
</body>
</html>

js文件:

function showPic(whichpic) {
if (!document.getElementById("placeholder")) return true;
var source = whichpic.getAttribute("href"); //读取图片链接
var placeholder = document.getElementById("placeholder");
placeholder.setAttribute("src",source); //通过DOM操作设置src为图片链接
if (!document.getElementById("description")) return false;
if (whichpic.getAttribute("title")) {
var text = whichpic.getAttribute("title");
} else {
var text = "";
}
var description = document.getElementById("description");
if (description.firstChild.nodeType == 3) {
description.firstChild.nodeValue = text;
}
return false;
}

function prepareGallery() {
if (!document.getElementsByTagName) return false; //对象检测,确保getElementsByTagName方法可用
if (!document.getElementById) return false; //对象检测
if (!document.getElementById("imagegallery")) return false; //对象检测
var gallery = document.getElementById("imagegallery");
var links = gallery.getElementsByTagName("a");
for ( var i=0; i < links.length; i++) {
links[i].onclick = function() { //点击图片链接的文字时,调用onclic事件
return showPic(this);
}
links[i].onkeypress = links[i].onclick;
}
}

function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}

addLoadEvent(prepareGallery);

要实现一个图片库的效果。

考虑到“平稳退化“,就是说当这段代码片段的js失效的时候,图片库的某些功能会不会受影响?会不会出现,点击图片,出现“该图片无法显示“这种情况。

经过尝试,发现该页面的功能没有受影响,只是用户体验差了一点。

( js失效后,点击图片名字,单独开了一个新页面显示该图片。js有效时,直接在当前页面的div内显示,不需要开新页面。仅此而已)。主要看写有注释的那几行。