javascript - 在图像加载完成之前显示 preloader.gif

标签 javascript jquery html css

我有一个图像库,我想为所有图像标签分配一个类名,在完成加载之前显示 preload.gif 并在图像加载完成时显示图像。 我尝试使用这段代码:

<!DOCTYPE html>
<html>
  <head>
    <script>
      function myFunction() {
        alert("Image loaded: " + document.getElementsById("myImg").complete);
      }
    </script>
  </head>
  <body onload="myFunction()">
    <p>This property returns true if the image is finished loaded, and false if not.</p>
    <img class="myImg" src="compman.gif" alt="Computerman" width="107" height="98">
  </body>
</html>

此代码支持 id 名称,但我想为所有图像标签分配类名称

最佳答案

我终于明白了!我尝试了几种不同的方法,但这种方法最适合我。

我将图像最初设置为加载 gif,一旦加载 gif,它就会调用一个函数来加载图像。加载图像后,该函数会根据您发送的参数更改原始图像的来源。

Javascript

function loadimage(imgsrc, change){
  var loadimage = new Image();
  loadimage.onload = changesrc(imgsrc, change);
  loadimage.src = imgsrc;
}

function changesrc(imgsrc, change) {
  change.src=imgsrc;
}

HTML(我链接到的照片很大,确保你看到正在加载

<img onload="loadimage('http://upload.wikimedia.org/wikipedia/commons/4/49/Swiss_Jungfrau_mountains.jpg',this);" src="http://jimpunk.net/Loading/wp-content/uploads/loading2.gif">

通过这种方式,您可以在 img 静止图像中设置原始图像源,从而使所有内容都靠得很近。

关于javascript - 在图像加载完成之前显示 preloader.gif,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23688163/

相关文章:

javascript - 如何使用音频元素创建连续的曲调

javascript - 如何使用 chessboard.js ,一个 javascript 棋盘?

javascript - 在 Meteor.js 中使用 Cordova 插件

javascript - 使用attr()方法,将属性作为键值对象或直接传递时,哪种方法在jQuery中添加属性时执行最快?

javascript - Javascript 和 jQuery 中的 Trapping Function not defined 错误

javascript - 发生滚动后,如何使 div(菜单)固定位置?

javascript - 如何禁用浏览器左下角的 href 显示?

javascript - 使用URL anchor 深层链接相册,无需劫持后退按钮

javascript - 在字符串中查找字符并在找到时将整个单词添加到数组

javascript - 如何使 float div成为每行最高元素的高度