Refresh Image onload with Javascript?

Question

I'm working on a wordpress editor where I need to be able to refresh images without having to reload the page. However, I'm not getting the plot as I'm not really a javascript master :(

I'm running this, but in the console log, all I get is: "Uncaught ReferenceError: updateImage is not defined". What am I doing wrong?

<script>

    var newImage = new Image();
    newImage.src = "http://2famous.tv/wp-content/uploads/2013/07/Dubai-Sky-scrapers_thumb_one.jpg";

    function updateImage() {
    if(newImage.complete) {
        document.getElementById("thumb1").src = newImage.src;
        newImage = new Image();
        newImage.src = "http://2famous.tv/wp-content/uploads/2013/07/Dubai-Sky-scrapers_thumb_one.jpg?" + new Date().getTime();

    }

        setTimeout(updateImage, 1000);
    };


</script>

<img id="thumb1" src="image.jpg" onload="updateImage();">

Not sure... have it from this thread: http://stackoverflow.com/questions/1077041/refresh-image-with-a-new-one-at-the-same-url — 2famous.TV, Jul 18 '13 at 17:27
This code works as written here. Usually when I get that error there is a javascript syntax error somewhere on the page, usually a close bracket } or something. Do you have other javascript code on the page? — nickles80, Jul 18 '13 at 17:44
@Diodeus - yes it is. https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement?redirectlocale=en-US&redirectslug=DOM%2FHTMLImageElement — nickles80, Jul 18 '13 at 17:46

score 1 · Answer 1 · answered Jul 18 '13 at 17:29

1

When the <img> is loading, the <script> is not loaded yet. So, the updateImage() method doesn't exists. Try to use jquery, there you could do it easily with the ready event.

answered Jul 18 '13 at 17:29

eKek0

23,005
25
91
119

I think that my best option here is to use unique filenames for each adjustment... – 2famous.TV Jul 18 '13 at 17:48

Refresh Image onload with Javascript?

1 Answers1