Develop Reference

Javascript: preload next image

not very big on JS.
I currently have a script I use to load/change background images every xxx seconds.
What I would like is to display an image and preload the next one so it displays seamlessly (ie: no jittering or slow loads).
Here is my current script, can this be adapted to achieve such a result?
<!-- Background Image Changer inpired by: https://stackoverflow.com/a/7265145 -->
var images = ['images/image01.jpg',
'images/image02.jpg',
'images/image03.jpg',
'images/image04.jpg',
'images/image05.jpg',
'images/image06.jpg',
'images/image07.jpg',
'images/image08.jpg',
'images/image09.jpg',
'images/image10.jpg',
'images/image11.jpg',
'images/image12.jpg',
'images/image13.jpg',
'images/image14.jpg',
'images/image15.jpg',
'images/image16.jpg',];
var numSeconds = 30;
var curImage = 0;
function switchImage()
{
curImage = (curImage + 1) % images.length
document.body.style.backgroundImage = 'url(' + images[curImage] + ')'
}
window.setInterval(switchImage, numSeconds * 1000);
NOTES: There are 50 images in my script. I've only used fake named placeholders for clarity.
EDIT: To be clear, I only want one image displayed and the next (one) image to be preloaded. It's running on a RPi 3b so not much memory is available.

I want to add a different answer here. There are a few options you can use to improve your web page performance. Using <link> with preconnect and preload rel value can helps you to load resources before using them:
Use preconnect keyword for the rel attribute to tell the browsers that the user is likely to need resources from this origin and therefore it can improve the user experience by preemptively initiating a connection to that origin.
<link rel="preconnect" href="<your-images-base-url">
Use preload keyword for the rel attribute to declare fetch requests in the HTML's , specifying resources that your page will need very soon. This ensures they are available earlier and are less likely to block the page's render, improving performance. Taken from https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types/preload
Create preload link:
const preloadLink = document.createElement('link');
document.head.appendChild(preloadLink);
preloadLink.rel = 'preload';
preloadLink.as = 'image';
function preloadNextImage(href) {
preloadLink.href = href;
}
function switchImage()
{
curImage = (curImage + 1) % images.length
document.body.style.backgroundImage = 'url(' + images[curImage] + ')';
preloadNextImage(/* <next-image-url> */)
}

You could just load the next image when displaying the current one using the JavaScript Image object. When switchImages runs again then the image will be already in the browsers cache. Also, the cached images are stored in a new array, so the cache "generator" will be ran only once. With this snippet you will need enough delay between iterations, so the next image will have enough time to be downloaded from the sever.
var images = ['images/image01.jpg',
'images/image02.jpg',
'images/image03.jpg',
'images/image04.jpg',
'images/image05.jpg',
'images/image06.jpg',
'images/image07.jpg',
'images/image08.jpg',
'images/image09.jpg',
'images/image10.jpg',
'images/image11.jpg',
'images/image12.jpg',
'images/image13.jpg',
'images/image14.jpg',
'images/image15.jpg',
'images/image16.jpg',];
var numSeconds = 2;
var curImage = 0;
var cache = [];
function switchImage()
{
curImage = (curImage + 1) % images.length;
document.body.style.backgroundImage = 'url(' + images[curImage] + ')';
if(images[curImage + 1] && !cache[curImage + 1]) {
cache[curImage + 1] = new Image();
cache[curImage + 1].src = images[curImage + 1];
}
}
window.setInterval(switchImage, numSeconds * 1000);

need javascript to automatically reload page when minute updates

I am using the following code in my website which displays the current time
function startTime() {
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
m = checkTime(m);
s = checkTime(s);
document.getElementById('time').innerHTML =
h + ":" + m;
var t = setTimeout(startTime, 500);
}
function checkTime(i) {
if (i < 10) {i = "0" + i}; // add zero in front of numbers < 10
return i;
}
i am also using the automatic refresher tag in my html which reloads page after every 60 seconds
<meta http-equiv="refresh" content="60">
what i want is whenever the time changes to next minute the page reloads
which means if current time is 14:05 and when it hits 14:06 the page reloads by reading this time change and NOT by 60 seconds interval from which the user opens the page.

You can set timeout looking at the clock, just get the actual seconds and wait til 60 to reload:
var date = new Date();
setTimeout(function(){
window.location.reload(1);
},(60 - date.getSeconds())*1000)
Just put that at the head inside a script tag

Try using this
setTimeout(function(){
window.location.reload(1);
}, 60000); // 60 sec
Source: How to reload page every 5 second?
or take a look at this too
setTimeout(function(){
var minutes = (new Date()).getMinutes()
if ( !minutes%15 ) location.reload(); // if minutes is a multiple of 15
},60000); // 60.000 milliseconds = 1 minute
Source: jQuery auto refresh page on clock time

Handling the local time using client side script is not recommended because the user's clock might be messed up and thus your system would turn out to be faulty.
So it is better you fetch time from your server using any server-side language like PHP
In PHP:
<?php
echo date("h:i");
?>
Now you can call this function using AJAX and you can easily handle your time.
var result=null;
function getDate(){
var result=$.ajax({
url: "script.php",
type: "POST",
success: function(data){
setTimeOut(function(){getDate();},60000);
}
}).responseText;
}

JQuery progress bar pauses when browser tab is changed

I'm trying to display a progress bar on a html page using javascript. However,
when the browser tab containing the code becomes inactive, the progress bar stops updating,
being resumed when the tab is active again.
How can I prevent the browser from stopping/pausing the execution of javascript code when the window is inactive?
Although it may be irrelevant, here is the code:
Object.progressBar = function(){
$( "#question-progress-bar" ).progressbar({
value: false,
complete: function(event, ui) { ... }
});
var seconds = 15.0,
progressbar = $("#question-progress-bar"),
progressbarValue = progressbar.find(".ui-progressbar-value");
progressbarValue.css({
"background": '#c5b100',
"opacity" : '0.8'
})
var int = setInterval(function() {
var percent = (15-seconds)/15*100;
seconds=seconds-0.1;
progressbar.progressbar( "option", {
value: Math.ceil(percent)
});
$("#question-progress-bar-seconds").html((seconds).toFixed(1)+"s");
if (seconds <= 0.1) {
clearInterval(int);
}
}, 100);
}

Instead of using setInterval and assuming a certain amount of time has passed between calls (even when it's up front, setInterval has hit or miss accuracy) use the Date object to get a time when the bar starts, and compare that to the current time at each iteration.
<html>
<head>
<script>
function go()
{
var pb = new ProgressBar(5, "targ");
}
window.onload = go;
function ProgressBar(l, t)
{
var start = Date.now();
var length = l * 1000;
var targ = document.getElementById(t);
var it = window.setInterval(interval, 10);
function interval()
{
var p = 100 * (Date.now() - start) / length;
if(p > 100)
{
p = 100;
window.clearInterval(it);
alert("DONE"); // alternatively send an AJAX request here to alert the server
}
targ.value = (Math.round(p) + "%");
}
}
</script>
</head>
<body>
<input type="text" id="targ" />
</body>
</html>
I've made an example object, here, that immediately starts a countdown when instantiated and calls an alert and kills the interval timer when done. Alternatively an AJAX call, or any other sort of call can be done upon completion.
It should be noted that this will NOT complete the call if the browser stops Javascript all together. It will, however, complete it as soon as the tab has been given focus again if enough time has passed in the interim. There is no way for a website to alter this sort of browser behavior from the scripting side.
Hope that helps!

Asset.images slow? How do I execute functions so they don't freeze the browser?

I recently downloaded a nice mootools plugin to provide a rating system for search results on my site: MooStarRating.
It works quite well, but it is very slow to initialize. Here are the execution times I have logged (for pulling back 50 search results).
======== starrating ========
init: 0.06ms 50
img: 5.40ms 50
str: 0.54ms 50
each: 3.04ms 50
inject: 0.86ms 50
end: 1.52ms 50
subtotal: 11.42ms 50
-----------------
total: 571.00ms
Here is the initialize function these logs refer to (just for reference):
initialize: function (options) {
lstart("starrating");
// Setup options
this.setOptions(options);
// Fix image folder
if ((this.options.imageFolder.length != 0) && (this.options.imageFolder.substr(-1) != "/"))
this.options.imageFolder += "/";
// Hover image as full if none specified
if (this.options.imageHover == null) this.options.imageHover = this.options.imageFull;
lrec("init");
// Preload images
try {
Asset.images([
this.options.imageEmpty,
this.options.imageFull,
this.options.imageHover
]);
} catch (e) { };
lrec("img");
// Build radio selector
var formQuery = this.options.form;
this.options.form = $(formQuery);
if (!this.options.form) this.options.form = $$('form[name=' + formQuery + "]")[0];
if (this.options.form) {
var uniqueId = 'star_' + String.uniqueID();
this.options.form.addClass(uniqueId);
this.options.selector += 'form.' + uniqueId + ' ';
}
this.options.selector += 'input[type=radio][name=' + this.options.radios + "]";
// Loop elements
var i = 0;
var me = this;
var lastElement = null;
var count = $$(this.options.selector).length;
var width = this.options.width.toInt();
var widthOdd = width;
var height = this.options.height.toInt();
if (this.options.half) {
width = (width / 2).toInt();
widthOdd = widthOdd - width;
}
lrec("str");
$$(this.options.selector).each(function (item) {
// Add item to radio list
this.radios[i] = item;
if (item.get('checked')) this.currentIndex = i;
// If disabled, whole star rating control is disabled
if (item.get('disabled')) this.options.disabled = true;
// Hide and replace
item.setStyle('display', 'none');
this.stars[i] = new Element('a').addClass(this.options.linksClass);
this.stars[i].store('ratingIndex', i);
this.stars[i].setStyles({
'background-image': 'url("' + this.options.imageEmpty + '")',
'background-repeat': 'no-repeat',
'display': 'inline-block',
'width': ((this.options.half && (i % 2)) ? widthOdd : width),
'height': height
});
if (this.options.half)
this.stars[i].setStyle('background-position', ((i % 2) ? '-' + width + 'px 0' : '0 0'));
this.stars[i].addEvents({
'mouseenter': function () { me.starEnter(this.retrieve('ratingIndex')); },
'mouseleave': function () { me.starLeave(); }
});
// Tip
if (this.options.tip) {
var title = this.options.tip;
title = title.replace('[VALUE]', item.get('value'));
title = title.replace('[COUNT]', count);
if (this.options.tipTarget) this.stars[i].store('ratingTip', title);
else this.stars[i].setProperty('title', title);
}
// Click event
var that = this;
this.stars[i].addEvent('click', function () {
if (!that.options.disabled) {
me.setCurrentIndex(this.retrieve('ratingIndex'));
me.fireEvent('click', me.getValue());
}
});
// Go on
lastElement = item;
i++;
}, this);
lrec("each");
// Inject items
$$(this.stars).each(function (star, index) {
star.inject(lastElement, 'after');
lastElement = star;
}, this);
lrec("inject");
// Enable / disable
if (this.options.disabled) this.disable(); else this.enable();
// Fill stars
this.fillStars();
lrec("end");
return this;
},
So, the slowest part of the function is this:
// Preload images
try {
Asset.images([
this.options.imageEmpty,
this.options.imageFull,
this.options.imageHover
]);
} catch (e) { };
Which is strange. What does Asset.images do? Does the script block until these images have been loaded by the browser? Is there a way to preload images that runs faster?
How can I make the scripts on my page execute faster? It is a big problem for them to take 800ms to execute, but 200ms is still quite bad. At the moment, my search results all pop into existence at once. Is it possible to make it so that individual search results are created separately, so that they don't block the browser while being created? Similarly, is it possible to do this for the individual components of the search results, such as the MooStarRating plugin?

no. Asset.images is non-blocking as each of these gets loaded separately and a singular event is being dispatched when all done.
the speed for loading will be dependent on the browser but it be will multi-threaded to whatever capability it has for parallel downloading from the same host.
https://github.com/mootools/mootools-more/blob/master/Source/Utilities/Assets.js#L115-129
immediately, it returns an Element collection with the PROMISE of elements that may still be downloading. that's fine - you can use it to inject els, attach events, classes etc - you just cannot read image properties yet like width, height.
each individual image has it's own onload that fires an onProgress and when all done, an onComplete for the lot - i would advise you to enable that, remove the try/catch block and see which image is creating a delay. you certainly don't need to wait for anything from Asset.images to come back.
you also seem to be using it as a 'prime the cache' method, more than anything - as you are NOT really saving a reference into the class instance. your 'each' iteration can probably be optimised so it uses half the time if objects and functions are cached and so are references. probably more if you can use event delegation.
To answer your questions about not freezing the browser due to the single-threaded nature of javascript, you defer the code via setTimeout (or Function.delay in mootools) with a timer set to 0 or a 10ms due to browser interpretations. You also write the function to to exec a callback when done, in which you can pass the function result, if any (think ajax!).

Updating an image that is re-uploaded periodically

I have a webcam script that sends a JPG via FTP to my webserver every 10 seconds (overwriting the original).
How can I get jQuery to refresh that image? I tried:
window.onload = function() {
$('body').prepend('<img id="cam" src="ww.jpg" alt="" />');
setInterval(runAgain, 12500);
};
function runAgain() {
$.ajax({
url:'ww.jpg',
cache:false,
beforeSend:function() {
$('#cam').remove();
},
success:function() {
$('body').prepend('<img id="cam" src="ww.jpg" alt="" />');
}
});
}
Note: I don't want to refresh the page if I can help it.

A dirty way is appending a timestamp or a random number at the end of the image src, to prevent the caching, like
img src="image.jpg?random=[RANDOM]"
where [RANDOM] is the timestamp or the random number

It looks like you have the problem with the caching - browser already has the image in the cache and doesn't load it again from server. The simplest way is to add the random parameter that will make the browser think that it is the other image:
...
url:'ww.jpg?' + Math.random()
...
It is possible to achieve the same effect with serverside tune-ups, but this way is probably least intrusive and easier to implement.

You actually only need to refresh the src. Of course you should use a cache buster to avoid browser caching the image destonation. A solution in this case would be random query string parameter.
$(function() {
var $img = $('<img>', {
src: 'ww.jpg'
}).appendTo(document.body);
setInterval(function() {
$img.attr('src', function(_, src) {
return [src, '?', ~~(Math.random() * 40000)].join('');
});
}, 12500);
});

function updateLogo() {
var base_src = "http://www.google.com/logos/2011/graham11-hp-start.png";
var logo = $('#logo');
var timestamp = new Date().getTime();
// uncomment the timestamp part if your server supports an extra parameter to prevent caching
logo.attr('src', base_src);// + '?_ts=' + timestamp);
};
setInterval(updateLogo, 1000);
If your server supports an extra parameter in the image URL you'll prevent caching the image.