Загрузить изображение из javascript
На моей странице слайд-шоу альбома у меня есть код типа
<span style="display:none;">
<img id="id1" src="~$imageUrl`" onload="javascript:showImage();">
</span>
<span>
// show loader.
</span>
в showImage()
, я уверен, что изображение загружено, поэтому я показываю изображение и скрываю загрузчик.
Теперь, когда пользователь щелкает дальше, мне нужно изменить src изображения. Теперь мне не нужно знать, как установить src только при загрузке изображения.
Ответы
Ответ 1
вы можете просто добавить еще один скрытый элемент img
и поменять их в onload
.
Или используйте один элемент изображения и используйте javascript, например:
var _img = document.getElementById('id1');
var newImg = new Image;
newImg.onload = function() {
_img.src = this.src;
}
newImg.src = 'http://whatever';
этот код должен предварительно загрузить изображение и показать его, когда он готов
Ответ 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/
Ответ 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>
Ответ 4
Используйте новый объект изображения каждый раз, когда вы хотите загрузить изображение:
var image = new Image();
image.onload = function () {
document.getElementById('id1').setAttribute('src', this.src);
};
image.src = 'http://path/to/image';
Ответ 5
Если вы загружаете изображение через AJAX, вы можете использовать обратный вызов, чтобы проверить, загружено ли изображение, и назначить атрибут hiding и src.
Что-то вроде этого:
$.ajax({
url: [image source],
success: function() {
// Do the hiding here and the attribute setting
}
});
Для получения дополнительной информации обратитесь к JQuery AJAX
Ответ 6
Попробуйте это. У вас есть символы в $imageUrl
<img id="id1" src="$imageUrl" onload="javascript:showImage();">
Ответ 7
Вы можете попробовать следующее:
<img id="id1" src="url/to/file.png" onload="showImage()">
function showImage() {
$('#id1').attr('src', 'new/file/link.png');
}
Кроме того, попробуйте удалить ~
, который является просто оператором, который необходим для Server-Side (например, ASP.NET), вам не нужен он в JS.
Таким образом, вы можете изменить атрибут изображения.
Вот скрипка: http://jsfiddle.net/afzaal_ahmad_zeeshan/8H4MC/
Ответ 8
См. этот учебник: Загрузка изображений с помощью встроенного JavaScript и обработка событий для показа загружаемых роликов
В нем рассказывается, как загружать изображения с помощью встроенного JavaScript и как обрабатывать события для показа загружающих роликов. В принципе, вы создаете новый Image(); и правильно обработать событие. Это должно работать во всех браузерах даже в IE7 (возможно, даже ниже IE7, но я не тестировал это...)
Ответ 9
это сработало для меня, хотя... я хотел отобразить изображение после нажатия на значок карандаша... и я хотел, чтобы он был бесшовным.. и это был мой подход.
![кнопка карандаша для отображения изображения]()
i создал элемент ввода [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>
это выполняется во время прослушивания события изменения элемента входного файла с идентификатором #upl.
$(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 = "";
}
});
})
Ответ 10
мне очень жаль, что у меня нет ответа для вас, но я надеюсь, что вы найдете лучший ответ из этого поста :)