динамическое <img>обновление с помощью JavaScript

Question

Я пытаюсь заставить пользовательское изображение обновляться, скажем, каждые две секунды.Javascript получает пользовательский ввод для URL, а Javscript добавляет его на страницу.Затем загружаемые изображения необходимо обновлять каждые 2 секунды, но я не могу заставить их обновляться должным образом без обновления всей страницы или перезагрузки из кэша:

function getImg(){

var url=document.getElementById('txt').value;
var div=document.createElement('div');
div.className="imageWrapper";
var img=document.createElement('img');
img.src=url;
div.appendChild(img);
document.getElementById('images').appendChild(div);
return false;
}

setInterval(function(){
    $('img').each(function(){
       var time = (new Date()).getTime();
       $(this).attr("src", $(this).attr("src") + time );
    });
}, 2000);

Есть идеи?

Answer 1

Когда вам нужно принудительно перезагрузить ресурс, вы должны добавить dymmy queryString в конце вашего URL:

<img id="img1" src="myimg.png?dummy=23423423423">

Javascript:

$('#img1').attr('src','myimg.png?dummy=23423423423');

и меняйте фиктивное значение для каждого обновления

Answer 2

Поместите изображение в контейнер как:

<div id="container"><img src=""../> </div>

, затем просто обновите содержимое контейнера как:

$('#container').html('<img src="newSource"../>');

Answer 3

Ваша предпосылка кажется хорошей, не знаю, почему она не работает. Зачем смешивать и сопоставлять jQuery с не-jquery? Это модификация вашего кода, но это рабочий пример. Вы должны быть в состоянии адаптировать его для ваших целей.

http://jsfiddle.net/zr692/1/

Вы можете легко создавать элементы через jQuery. Смотрите измененную функцию getImg, которую я создал. Ia также переключился с attr на prop, что является рекомендуемым средством доступа к атрибуту src в jQuery 1.7 +.

function getImg() {
    var url = 'http://placehold.it/300x300/123456';
    var $div = $('<div />');
    var $img = $('<img />', { src: url });
    $div.append($img);
    $('body').append($div);
}

getImg();

var interval = setInterval(function() {
    $('img').each(function() {
        var time = (new Date()).getTime();
        var oldurl = $(this).prop('src');
        var newurl = oldurl.substring(0, oldurl.lastIndexOf('/') + 1) + time.toString().substr(7, 6);
        $('#output').html(newurl);
        $(this).prop('src', newurl);
    });
}, 2000);