lazy load iframe (retard src http appel) avec jquery

Je suis à la recherche de quelque chose de semblable à jQuery image lazy load plugin, mais pour iframes.

  • Le mieux est de tout simplement ne pas ajouter de l'iframe pour les DOM jusqu'à ce que vous voulez charger, pas de risque de confusion, puis...
  • L'iframe est codée en dur dans les DOM. Je n'ai pas l'option pour insérer manuellement, sinon cela aurait été la voie la plus facile.
InformationsquelleAutor Steve | 2011-08-23
  1. 23

    Cela a fonctionné pour moi.

    var iframes = $('iframe');

$('button').click(function() {
    iframes.attr('src', function() {
        return $(this).data('src');
    });
});

iframes.attr('data-src', function() {
    var src = $(this).attr('src');
    $(this).removeAttr('src');
    return src;
});

    jsFiddle.

    • Donc, si src est codé en dur dans le html de la DOM, les modifier à data-src puis sur une demande de changement à src pour charger le contenu? Aussi, mon cas n'est pas basé sur de défilement, mais plutôt sur cliquez que :targets le contenant div.
    • Vous l'avez.
    • Downvote d'une explication?
    • Je l'ai essayé et ça ne fonctionne pas (voir modifier ci-dessus), donc en bas de vote. A obtenu un peu de code qui fonctionne? Serait heureux de l'essayer et de changer mon vote et sélectionnez ce que la réponse. J'apprécie votre réponse de toute façon et j'aime la logique derrière votre explication. Je veux juste une solution de travail à la réponse.
    • Je l'ai mis à jour.
    • Fonctionne très bien! Merci beaucoup @Alex! 🙂

    InformationsquelleAutor alex
  2. 3

    Un question similaire a été récemment publié spécifiques à iFrames avec Twitter Bootstrap basé sur des onglets, je répondu à l'aide d'une technique que je vais appeler Chargement différé des iFrames. Le js/jquery est comme suit; voir le code complet, y compris des balises html dans le violon ou sur ma réponse à l'OP:

    <script>
$('#myTabs').bind('show', function(e) {  

//identify the tab-pane
paneID = $(e.target).attr('href');

//get the value of the custom data attribute to use as the iframe source
src = $(paneID).attr('data-src');

//if the iframe on the selected tab-pane hasn't been loaded yet...
if($(paneID+" iframe").attr("src")=="")
{
    //update the iframe src attribute using the custom data-attribute value
    $(paneID+" iframe").attr("src",src);
}
});
</script>
    InformationsquelleAutor technoTarek
  3. 0

    Vous pouvez toujours initialiser l'attribut src pour about:blank et puis quand votre sur événement se déclenche, définissez l'attribut src de l'URL que vous voulez naviguer.

    • l'iframe src est codé en dur dans le HTML de la DOM et ne veulent pas faire trop de manipulation du DOM, en les remplaçant par about:blank et puis en le remplaçant de retour avec l'URL (qui doivent être stockées en tant que variable).
    InformationsquelleAutor nickytonline
  4. 0

    Que vous pouvez définir la src à about:blank? Comme cette?

    http://jsfiddle.net/MaUfH/

    • Le iframe est incorporé dans le code HTML de la page et chargés sur le chargement de la page, tandis que votre exemple des charges de la iframe onClick. Cela ne fonctionne pas dans mon cas.
    InformationsquelleAutor wightnoise
  5. 0

    Si vous voulez le faire dans WordPress

    Ici est une automatique, demander la réduction, la solution

    Dans WordPress plugin formulaire

    Ici est un plugin pour WordPress vous pouvez le télécharger et l'installer manuellement via le plugin WordPress référentiel. J'ai créé aujourd'hui pour gérer cette situation. Aucune modification du contenu sont nécessaires, cela fonctionne automatiquement une fois activé sur tout et tous les iframes.

    https://wordpress.org/plugins/lowermedia-iframes-on-demand/

    InformationsquelleAutor hawkeye126