JS - spinner when loading image

最新推荐文章于 2023-04-11 08:45:31 发布

howlowl

最新推荐文章于 2023-04-11 08:45:31 发布

阅读量161

点赞数

分类专栏： WebDev

WebDev 专栏收录该内容

71 篇文章 0 订阅

订阅专栏

add the spinner (and high resolution image) on click, and remove it when finish loading (load event)

document.querySelector('img.preview').addEventListener('click', function(e) {
  var lowRes = e.target.src;
  var myOverlay = document.querySelector('.overlay');
  var highRes = document.createElement('img');
  var mySpinner = document.createElement('img');

  myOverlay.style.display = 'block';
  highRes.className = 'bgImg';
  highRes.src = lowRes.substr(0, lowRes.length-7) + '.jpg';
  myOverlay.appendChild(highRes);

  mySpinner.className = 'spinner';
  mySpinner.src = 'images/spinner.gif';
  myOverlay.appendChild(mySpinner);

  highRes.addEventListener('load', function() {
    mySpinner.parentNode.removeChild(mySpinner);
  });

}, false);

body {
  background: url(images/background_wood.jpg) repeat;
}

img.preview {
  width: 100px;
  height: 100px;
  display: block;
  border-radius: 10px;
  margin: 0 auto;
  margin-top: 200px;
  cursor: pointer;
}

.overlay {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0,0,0,0.7);
  width: 100%;
  height: 100%;
  /* z-index: 5000; */
}

.overlay img.bgImg {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  max-height: 100%;
}

.overlay img.spinner {
  display: block;
  position: absolute;
  top: 0;
  left: 50%;
  margin: 0 auto;
  margin-top: 300px;
}

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Events</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <img class="preview" src="images/taquitosandcheese_tn.jpg" alt="Taquitos and Cheese">
  <div class="overlay"></div>
  <script src="script.js"></script>
</body>
</html>

howlowl

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS - spinner when loading image

add the spinner (and high resolution image) on click, and remove it when finish loading (load event)document.querySelector('img.preview').addEventListener('click', function(e) { var lowRes = e.ta...
复制链接

扫一扫

专栏目录