Question

在我的相册幻灯片页面上，我有像

这样的代码

<span style="display:none;">
   <img id="id1" src="~$imageUrl`" onload="javascript:showImage();">
</span>

<span>
    // show loader.
</span>

在showImage()中，我确定图像已加载，因此我会显示图像并隐藏加载程序。

现在，当用户点击下一步时，我需要更改图像的src。现在我需要不知道如何在加载图像时设置src。

Answer 1

您可以添加另一个隐藏的img元素并在onload事件中进行交换。

或使用单个图像元素并使用如下的JavaScript：

var _img = document.getElementById('id1');
var newImg = new Image;
newImg.onload = function() {
    _img.src = this.src;
}
newImg.src = 'http://whatever';

此代码应预先加载图像并在准备好后显示

Answer 2

对不起伙计们。

您不能依赖图像加载事件来触发，但在某些情况下您可以依赖它并回退到允许的最大加载时间。在这种情况下，10秒。我写了这篇文章，它存在于人们想要在表格帖子上链接图像的生产代码上。

function loadImg(options, callback) {
  var seconds = 0,
  maxSeconds = 10,
  complete = false,
  done = false;

  if (options.maxSeconds) {
    maxSeconds = options.maxSeconds;
  }

  function tryImage() {
    if (done) { return; }
    if (seconds >= maxSeconds) {
      callback({ err: 'timeout' });
      done = true;
      return;
    }
    if (complete && img.complete) {
      if (img.width && img.height) {
        callback({ img: img });
        done = true;
        return;
      }
      callback({ err: '404' });
      done = true;
      return;
    } else if (img.complete) {
      complete = true;
    }
    seconds++;
    callback.tryImage = setTimeout(tryImage, 1000);
  }
  var img = new Image();
  img.onload = tryImage();
  img.src = options.src;
  tryImage();
}

像这样使用：

loadImage({ src : 'http://somewebsite.com/image.png', maxSeconds : 10 }, function(status) {
  if(status.err) {
    // handle error
    return;
  }
  // you got the img within status.img
});

在JSFiddle.net上试试

http://jsfiddle.net/2Cgyg/6/

Answer 3

<span>
    <img id="my_image" src="#" />
</span>

<span class="spanloader">

    <span>set Loading Image Image</span>


</span>

<input type="button" id="btnnext" value="Next" />


<script type="text/javascript">

    $('#btnnext').click(function () {
        $(".spanloader").hide();
        $("#my_image").attr("src", "1.jpg");
    });

</script>

Answer 4

每次要加载图片时都使用新的图像对象：

var image = new Image();
image.onload = function () {
    document.getElementById('id1').setAttribute('src', this.src);
};
image.src = 'http://path/to/image';

Answer 5

如果您通过AJAX加载图像，您可以使用回调来检查图像是否已加载并执行隐藏和src属性分配。像这样：

$.ajax({ 
  url: [image source],
  success: function() {
  // Do the hiding here and the attribute setting
  }
});

有关更多阅读，请参阅此JQuery AJAX

Answer 6

试试这个。你在$imageUrl

中有一些符号

<img id="id1" src="$imageUrl" onload="javascript:showImage();">

Answer 7

你可以试试这个：

<img id="id1" src="url/to/file.png" onload="showImage()">

function showImage() {
 $('#id1').attr('src', 'new/file/link.png');
}

另外，尝试删除在JS中不需要它的服务器端（例如ASP.NET）所需的~，这只是操作符。

这样，您可以更改图像的属性。

这是小提琴：http://jsfiddle.net/afzaal_ahmad_zeeshan/8H4MC/

Answer 8

请参阅本教程：Loading images with native JavaScript and handling of events for showing loading spinners

它告诉您如何使用本机JavaScript加载图像以及如何处理显示加载微调器的事件。基本上，你创建一个新的Image（）;然后正确处理事件。这应该适用于所有浏览器，即使在IE7中（甚至可能低于IE7，但我没有测试过......）

Answer 9

虽然这对我很有用...我想在点击铅笔图标后显示图像...我希望它无缝...这是我的方法..

我创建了一个输入[file]元素并将其隐藏起来，

<input type="file" id="upl" style="display:none"/>

此输入文件的点击事件将由getImage函数触发。

<a href="javascript:;" onclick="getImage()"/>
    <img src="/assets/pen.png"/>
</a>

<script>
     function getImage(){
       $('#upl').click();
     }
</script>

这是在侦听ID为#upl的输入文件元素的change事件时完成的。

＆＃13;

   $(document).ready(function(){
     
       $('#upl').bind('change', function(evt){
         
		  var preview = $('#logodiv').find('img');
		  var file    = evt.target.files[0];
		  var reader  = new FileReader();
		
		  reader.onloadend = function () {
			$('#logodiv > img')
				.prop('src',reader.result)  //set the scr prop.
				.prop('width', 216);  //set the width of the image
				.prop('height',200);  //set the height of the image
		  }
		
		  if (file) {
			reader.readAsDataURL(file);
		  } else {
			preview.src = "";
		  }
		
	   });

   })

＆＃13;

和BOOM !!! - 它工作....

Answer 10

从JS到DOM元素的最简单加载图像：

element.innerHTML += "<img src='image.jpg'></img>";

带有onload事件：

element.innerHTML += "<img src='image.jpg' onload='javascript:showImage();'></img>";

Answer 11

只需单击图像，它将更改：

<div>
	<img src="https://i.imgur.com/jgyJ7Oj.png" id="imgLoad">
</div>

<script type='text/javascript'>
	var img = document.getElementById('imgLoad');	
	img.onclick = function() { img.src = "https://i.imgur.com/PqpOLwp.png"; }
 </script>

从javascript加载图片

11 个答案: