src缺省时img元素的alt信息展示技术实例页面

展示

hover下面区域

设置src属性显示图片

代码

• HTML：

  <img alt="美女沉思图" data-src="1.jpg">
  <p><button>设置src属性显示图片</button></p>

• CSS：

  img {
      display: inline-block;
      width: 256px; height: 192px;
      /* 隐藏Firefox alt文字 */
      color: transparent;
      position: relative;
      overflow: hidden;
  }
  img:not([src]) {
      /* 隐藏Chrome alt文字以及银色边框 */
      visibility: hidden;
  }
  img::before {
      /* 淡蓝色占位背景 */
      content: "";
      position: absolute; left: 0;
      width: 100%; height: 100%;
      background-color: #f0f3f9;
      visibility: visible;
  }
  img::after {
      /* 黑色alt信息条 */
      content: attr(alt);
      position: absolute;
      left: 0; bottom: 0;
      width: 100%;
      line-height: 30px;
      background-color: rgba(0,0,0,.5);
      color: white;
      font-size: 14px;
      transform: translateY(100%);
      /* 来点过渡动画效果 */
      transition: transform .2s;
      visibility: visible;
  }
  img:hover::after {
      transform: translateY(0);
  }

• HTML：

  var eleButton = document.querySelector('button'),
      eleImg = document.querySelector('img');
  
  if (eleButton && eleImg) {
      var initValueButton = eleButton.innerHTML;
      // 图片地址
      var srcImage = eleImg.getAttribute('data-src');
      // 移除该属性
      eleImg.removeAttribute('data-src');
      // 按钮点击事件
      eleButton.addEventListener('click', function() {
          if (this.innerHTML == initValueButton) {
              this.innerHTML = '移除src属性';
              // 图片显示
              eleImg.setAttribute('src', srcImage);
          } else {
              this.innerHTML = initValueButton;
              // src属性移除
              eleImg.removeAttribute('src');
          }
      });
  }