jQuery - How to auto load content every one minute using load()

Question

I have a script that loads content using load() via a click function.

I'd like to change this to auto load content every one minute like a slideshow.

I have 3 videos I need to loop through.

Please can someone point me in the right direction I have no idea where to start. My current script is below.

Thanks

I have updated the code below, in accordance with elliot-bonneville answer. I still need to find a way to loop through these videos.

JS

// define var video
var video = $('div.video');
var linkOne = $('.video_1').attr('href');
var linkTwo = $('.video_2').attr('href');
var linkThree = $('.video_3').attr('href');

setInterval(function() {
// load content into video
video.load( linkTwo + ' .content' , function() {
    // remove loading text
    $('.load').remove();
});
}, 10000) // 60000 milliseconds = one minute

setInterval(function() {
// load content into video
video.load( linkThree + ' .content' , function() {
    // remove loading text
    $('.load').remove();
});
}, 10000) // 60000 milliseconds = one minute

setInterval(function() {
// load content into video
video.load( linkOne + ' .content' , function() {
    // remove loading text
    $('.load').remove();
});
}, 10000) // 60000 milliseconds = one minute

LeeR · Accepted Answer · 2012-05-16T04:42:57.123

Use setTimeout

I think something like the below. I haven't tested it yet, so there might be some syntax errors. But hopefully you understand. let me know if anything doesn't make sense.

One reason I am using setTimeout rather setInterval is that this way, another timer doesn't get fired until after the load has completed. In this case, it won't matter too much as you are only doing it every 1 minute, but in some cases, the server latency might be more then the interval time. Also, this way, if for whatever reason, the script/server goes down and a successful reply isn't received then another call won't be made.

// define var video
var video = $('div.video');
var currentVid=1;
var maxVid=3;

setTimeout(cycleVideo, 10000) // 60000 milliseconds = one minute

function cycleVideo() {
    // load content into video
    var link = $('.video_'+currentVid).attr('href');
    video.load( link + ' .content' , function() {
        // remove loading text
        $('.load').remove();
        if(currentVid==maxVid) currentVid=1; else currentVid++;
        setTimeout(cycleVideo, , 10000) // 60000 milliseconds = one minute

    });
}

Thanks you are a genius, your code was awesome but there was an extra comma after cycleVideo that stumped me for a bit. Cheers — Clinton Green, May 16 '12 at 04:18

score 2 · Answer 2 · answered May 16 '12 at 03:05

2

Use setInterval, like this:

setInterval(function() {
    var link = $('#yourAElementId').attr('href');

    // load content into video
    video.load( link + ' .content' , function() {
        // remove loading text
        $('.load').remove();
    });
}, 60000); // 60000 milliseconds = one minute

answered May 16 '12 at 03:05

Elliot Bonneville

51,872
23
96
123

Thanks, I think I forgot to add that I have 3 videos that I need to loop through. Any ideas how to incorporate this? Thanks – Clinton Green May 16 '12 at 03:07
@ClintonGreen you should probably edit your question with that extra requirement :) – Andreas Wong May 16 '12 at 03:09

jQuery - How to auto load content every one minute using load()

2 Answers2