首先，我们可以使用CSS来制作图片代替。具体的做法是将图片的URL作为背景图像，然后设置标签的宽度和高度，来达到占位图片的效果。下面是一个样例代码：
<style>
.placeholder {
background-image: url('loading.gif');
width: 200px;
height: 200px;
}
</style>
<p ></p>
在这个例子中，我们定义了一个类名为“placeholder”的标签，通过CSS设置其背景图像为loading.gif，并设置其宽度和高度。这样，在网页渲染时，如果图片加载缓慢或者无法加载，就会显示出这个占位图片。
除了使用CSS外，我们还可以使用canvas来制作一些简单的图片代替。canvas是HTML5中新增的标签，可以用来绘制各种图形，并且可以通过javascript控制其绘制内容。下面是一个样例代码：
<canvas id="placeholder" ></canvas>
<script>
var canvas = document.getElementById('placeholder');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 200, 200);
ctx.fillStyle = '#fff';
ctx.font = '30px Arial';
ctx.fillText('Loading...', 50, 100);
</script>
在这个例子中，我们先创建了一个canvas标签，并设置其宽度和高度。然后，通过javascript获取到该标签，并获取到其画布的上下文（context），用来绘制图形。在这里，我们绘制了一个红色的矩形，并在矩形中央绘制了一个“Loading...”的文本。
除了canvas，我们还可以使用SVG（可缩放矢量图形）来制作图片代替。SVG是一种基于XML的格式，可以用来描述二维图形和动画等内容。在javascript中，我们可以通过创建SVG元素，并设置其中的属性和节点，来制作复杂的图形。下面是一个简单的SVG样例：
<svg >
<rect x="0" y="0" fill="#f00"></rect>
<text x="50" y="100" font-size="30" fill="#fff">Loading...</text>
</svg>
在这个例子中，我们使用了一个SVG标签，并设置其宽度和高度。然后，在其中使用了两个节点：一个矩形（rect）和一个文本（text）。分别设置它们的位置、大小和样式，最终呈现出一个“Loading...”的占位图像。
总之，制作图片代替是一项十分重要的技巧，在提高用户体验和网站性能方面有着重要的作用。在javascript中，我们可以通过CSS、canvas、SVG等不同的技术手段来制作图片代替，以满足不同的需求。通过使用这些技术，我们可以让网站更加美观、易用，让用户获得更好的浏览体验。
上一篇：javascript中原型用法详解
下一篇：CSS捉迷藏密室逃脱
