从javascript加载图片

在我的专辑幻灯片页面上，我有类似的代码

    // show loader.  

在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秒。 我写了这篇文章，它存在于生产代码中，当人们想要在表格post上链接图像时。

 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

     set Loading Image Image    

Answer 4

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

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

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

Answer 5

试试这个。你在https://stackoverflow.com/questions/19396390/load-image-from-javascript/$imageUrl有一些符号

Answer 6

你可以试试这个：

  function showImage() { $('https://stackoverflow.com/questions/19396390/load-image-from-javascript/#id1').attr('src', 'new/file/link.png'); } 

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

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

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

Answer 7

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

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

Answer 8

请参阅本教程： 使用本机JavaScript加载图像并处理事件以显示加载微调器

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

Answer 9

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

我创建了一个input [file]元素并使其隐藏，

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

这是在侦听ID为https://stackoverflow.com/questions/19396390/load-image-from-javascript/#upl的input-file元素的change事件时完成的。

  $(document).ready(function(){ $('https://stackoverflow.com/questions/19396390/load-image-from-javascript/#upl').bind('change', function(evt){ var preview = $('https://stackoverflow.com/questions/19396390/load-image-from-javascript/#logodiv').find('img'); var file = evt.target.files[0]; var reader = new FileReader(); reader.onloadend = function () { $('https://stackoverflow.com/questions/19396390/load-image-from-javascript/#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 = ""; } }); })