Question

脚本的作用是使用newimage.gif更改image.jpg，反之亦然 现在我想在newimage.gif加载时添加一个微调器。
像9gag.com/gif这样的东西有谁可以帮助我吗？

这是代码：
HTML

<img src="/image.jpg" id="pic" onclick="change()"/>
<a id="first" href="/newimage.gif" style="display:none;"></a>
<a id="second" href="/image.jpg" style="display:none;"></a>

的java

function change(){
   var imag = document.getElementById('pic').src;
   var img = imag.slice(-3);
   var img1 = document.getElementById('second').href;
   var imag2 = document.getElementById('first').href;

   if(img == 'gif') {
      document.getElementById('pic').src=imag2;
      //    here the newimage.gif changes to image.jpg 
   } else {
      //    here the image.jpg changes to newimage.gif  
      document.getElementById('pic').src=img1;
   }
}

Answer 1

我找到了一种方法，唯一的问题是在image.gif加载后，仍然会出现微调器。

if(img == 'gif') {
document.getElementById('pic').src=imag2;
//    here the newimage.gif changes back to image.jpg 
document.getElementById("spinner").style.display = "none";    
} else {
document.getElementById('pic').src=img1;

var image = new Image();
image.src = document.getElementById('second').href;

var x = image.complete;
if(x) {
document.getElementById("spinner").style.display = "none"; 
} else {
document.getElementById("spinner").style.display = "block";
}
}
}

这是我使用脚本http://www.2lol.ro/load/poze_haioase_miscatoare/20?ref=stk

Answer 2

我创建了一个类似的，并且这样做了。也许它会帮助你

function load_bike(imgUrl){
 old_url=$('#bike_img').attr('src');
 $('#bike_img').load( function(){
 $('.loading').css("display","none");
 $('#bike_img').css("display","block");
 }).attr('src', imgUrl);
 $('.loading').css("display","block");
 $('#bike_img').css("display","none");  
 }

Answer 3

你可以显示微调器，但为了让它变好，你必须先了解原始文件大小或至少将其显示为更大的图像。没有图像，你的html元素将具有0px的高度，所以即使你在那里添加了一个漂亮的动画，你也不会看到它。

添加和删除微调器的最佳方法是向元素添加/删除CSS类，例如：

var pic = document.getElementById('pic');
pic.onload = function() {
  pic.className = '';
}

function change(){
  imag = document.getElementById('pic').src;
  var img = imag.slice(-3);
  var img1 = document.getElementById('second').href;
  var imag2 = document.getElementById('first').href;
  var pic = document.getElementById('pic');

  pic.className = 'loading';
  if(img == 'gif') {
    pic.src=imag2;
  } else {
    pic.src=img1;
  }
}

此代码示例将元素类属性设置为“loading”，然后在加载元素时将删除元素类属性。然后你必须创建自己的css，可以这样讨论：

.loading {
  background-image: url('URL_TO_IMAGE'); 
}

加载新图像时显示微调器

3 个答案: