Come loop iframe utilizzando jquery?

Question

Ho due iframe. Quando la pagina viene caricata, iframe1 viene caricato dopo 8 secondi e ho bisogno di mostrare iframe2 che sostituisce iframe1 su un loop indefinito.

Ho provato il seguente codice e impostato il timeout come 8 secondi e 10 secondi, ma iframe1 cambia entro 2 secondi.

function preview() { 
    $('#iframe1').hide(); 
    $('#iframe2').show(); 
    setTimeout(function() { 
     $('#iframe2').hide(); 
     $('#iframe1').show(); 
    }, 8000); 
}; 
setInterval(preview, 10000) 

Quanto sopra non si carica uniformemente. Come posso mostrare/nasconderli senza problemi?

Answer 1

'possibile eseguire questa operazione utilizzando la funzione ricorsione e passare gli argomenti

$('#iframe2').hide(); 
animateInfinite('#iframe', 1) 

function animateInfinite(str, last) { 
    $(str + last).show(); 
    setTimeout(function() { 
     $(str + last).hide(); 
     animateInfinite('#iframe', ((last == 1) ? 2 : 1)); 
    }, 8000)  
} 

O uso setInterval

var iframe = $('[id^=iframe]').hide(); 
iframe.eq(0).show(); 
setInterval(function() { 
    iframe.toggle(); 
}, 1000); 

DEMO

Answer 2

È possibile alternare;

function preview() { 
     $('#iframe1').toggle(500); 
     $('#iframe2').toggle(500); 
    }; 
    setInterval(preview, 10000) 

Answer 3

prima mostra solo la seconda iframe

function preview() { 
    $('#iframe1').hide(); 
    $('#iframe2').show(); 
}; 
setInterval(preview,10000); 

Ora controllare se il secondo iframe è visible

if($('#iframe2').is(':visible')){ 
setTimeout(function() { 
     $('#iframe2').hide(); 
     $('#iframe1').show(); 
    }, 8000); 
} 

EDIT: È necessario inserire il codice all'interno document.ready

$(function(){ 
if($('#iframe2').is(':visible')){ 
setTimeout(function() { 
     $('#iframe2').hide(); 
     $('#iframe1').show(); 
    }, 8000); 
} 
}); 

check out il Fiddle Link

Answer 4

@Anil La risposta di Kumar è buona, ma non ancora del tutto, toggle() anima il cambiamento, se lo fai nello stesso momento in quel modo senza aspettare che sia fatto per attivare l'altro avrai 2 iframe seduti lì.

Oltre a @Anil Tutto quello che voglio aggiungere è la seguente modifica:

function preview(duration, hide) { 
    var hide = hide || 1; 
    var show = hide === 1 ? 2 : 1; 

    $('#iframe'+hide).toggle(500, function() { 
     $('#iframe'+show).toggle(500); 
     setTimeout(function() { 
      preview(duration, show); 
     }, duration); 
    }); 
} 

Questo non è testato, ma quello che dovrebbe fare comunque è applicare la leva per voi, il passaggio di identificazione del degli elementi ogni chiamata che prima anima l'elemento visibile e poi anima l'elemento invisibile in seguito.

Ciò assicura che gli elementi non si scontrino o interrompano il flusso di elementi. Inoltre ho aggiunto un argomento di duration alla vostra funzione - in questo modo è possibile richiamare la funzione in questo modo:

preview(10000)

se #iframe2 è visibile prima si utilizza tale numero ID per renderlo animare prima, il valore predefinito è uno come visibile nella funzione.

preview(10000, 2)

In questo modo anche ricreare il jQuery oggetti per tutto il tempo che i telefoni cellulari non mi piace molto (può rallentare em down piuttosto male) quindi cercate di memorizzare nella cache quelli variabili al di fuori della funzione e passarli forse, usando un altro trucco che cambia elementi.