js实现图片在未加载完成前显示加载中字样

要实现图片在未加载完成时显示“加载中”字样的效果，最简单的方法是通过JavaScript来处理。

以下是实现该功能的完整攻略：

1. 在HTML代码中添加占位符

在HTML代码中，可以先添加一个占位符，表示需要加载的图片。例如：

<div id="image-container">
  <img id="image-placeholder" src="loading.gif" alt="loading..." />
</div>

在这个示例代码中，<div>标签是图片的容器，<img>标签则是一个占位符，其中的src属性指向要显示的“加载中”图片，而alt属性则是在图片无法加载时显示的提示信息。

1. 用JavaScript动态替换占位符

接下来，需要使用JavaScript动态替换占位符。可以使用Image对象完成这个操作，Image对象有一个onload事件，表示当图片加载完成后触发。利用这个事件，可以在图片加载完成时把占位符替换成实际的图片。

下面是一个简单的示例代码：

<div id="image-container">
  <img id="image-placeholder" src="loading.gif" alt="loading..." />
</div>

<script>
  function loadImage() {
    var img = new Image();
    var container = document.getElementById('image-container');
    var placeholder = document.getElementById('image-placeholder');

    img.onload = function() {
      container.removeChild(placeholder);
      container.appendChild(img);
    };

    img.src = 'example.jpg';
  }

  window.onload = loadImage;
</script>

在这个示例代码中，首先定义了一个名为loadImage的函数，它会在窗口加载完成后执行。接着，创建一个Image对象，并将其onload事件设置为一个匿名函数。在这个匿名函数中，会先将占位符从容器中删除，然后把实际的图片添加到容器中。

最后，在代码的末尾，将窗口的onload事件设置为loadImage函数，这样当窗口加载完成时，即可开始加载图片并替换占位符。

除了以上的示例代码之外，还可以通过其他方式实现图片的异步加载和替换占位符的效果，例如使用jQuery的$.ajax方法加载图片等。无论哪种方式，都需要注意一定要在图片加载完成后再替换占位符，否则在图片尚未加载完成之前就替换占位符，会导致页面上的图片错位闪现等问题。