How do I make JavaScript run when an image is displayed by <<linkreplace>>?

Question

Hello my friends!

Using SugarCube 2.21, and I am using this JavaScript:

postdisplay['gif-reloader'] = function (t) {
    var el = $('.gif-reload img').toArray();
    var i, source;

    for (i = 0; i < el.length; i++) {
        var source = $(el[i]).attr('src');
        $(el[i]).attr('src', source + '?' + Date.now());
    }
};

I am using it to reload a gif image wrapped like so: @@.gif-reload;[img[image.url]]@@, so that a non-looping gif will play over again. However, since this is tied to entering the passage, it does not reload the gif when it is displayed by <<linkreplace>>:

<<linkreplace "text">>[img[gif.url]]<</linkreplace>>

I hope this is a simple problem, I do not know JavaScript.

Thank you all!

Answer 1

You should simply be able to do the following:

<<linkreplace "text">>[img["animated-gif-url.gif?" + Date.now()]]<</linkreplace>>

Though, to make that simpler to use, you could make a widget out of it.  For example:

<<widget "agif">>[img[$args[0] + "?" + Date.now()]]<</widget>>

Usage:

<<linkreplace "text">><<agif "animated-gif-url.gif">><</linkreplace>>

 

PS: Your postdisplay task is more complicated, and less thorough, than it needs to be.  It would be better as:

postdisplay['gif-reloader'] = function () {
	$('.gif-reload img').attr('src', function (i, src) {
		return src.replace(/\?.*$/, '') + '?' + i + Date.now();
	});
};

 

Comments

Yes! This definitely works. Thank you very much!