用function定义一个函数，可以在点击按钮后显示一张GIF然后显示一张图片

好的，这是一个很简单的问题。请看下面的代码示例，它使用`function`定义了一个函数，当点击按钮时，会显示一张GIF图像，然后显示另一张图片。

<button onclick="showImage()">点击这里</button>

<script>
function showImage() {
  // 显示GIF图像
  document.getElementById("loader").style.display = "block";
  
  // 延时500毫秒后显示另一张图片
  setTimeout(function() {
    document.getElementById("loader").style.display = "none";
    document.getElementById("image").style.display = "block";
  }, 500);
}
</script>

<!-- 显示GIF图像 -->
<img id="loader" src="loading.gif" style="display:none;"> 

<!-- 显示另一张图片 -->
<img id="image" src="myimage.jpg" style="display:none;">

在这个例子中，我们定义了一个名为`showImage`的函数，当用户点击按钮时，会触发该函数。函数会首先显示一个GIF图像，然后延时500毫秒后显示另一张图片。在代码中，我们使用`document.getElementById`获取图像元素，并设置其`style.display`属性来控制图像的可见性。