web-dev-qa-db-fra.com

Afficher un gif de chargement pendant le chargement du contenu de la page iframe

J'ai cherché et essayé diverses solutions à ce que j'essaie de réaliser, en vain ...

Je travaille sur un site de photographie qui a un volume élevé d'images à charger dans un iframe, ce qui prend un peu de temps à charger. Je veux afficher une image gif de chargement dans l'iframe jusqu'à ce que le chargement des images soit terminé.

Voici le site Web en question, http://www.chriszachary.com/portfolio

J'utilise une galerie de mouvements javascript pour permettre à l'utilisateur de contrôler le défilement de l'image avec sa souris. Les images ne défilent que lorsque la page est entièrement chargée. Pour aider à minimiser la confusion, j'ai pensé qu'une image gif de chargement serait plus efficace, mais je ne peux pas la retirer. Si vous cliquez sur l'une des catégories de portefeuille (mariage, fiançailles, portrait), vous remarquerez un temps d'attente important pour charger les images.

Si quelqu'un pouvait me dire comment y parvenir dans le cadre de l'iframe, veuillez me le faire savoir. Et si vous pouviez être précis sur le code à utiliser et où, je suis un novice: |

Merci d'avance, dans l'attente d'une réponse :)

htmliframeloadingshowgif
16
Chris Zachary

Remplacez la balise IFRAME dans cette page par du code HTML ci-dessous. IFRAME est recouvert d'un DIV où se trouve l'image de chargement (ou n'importe quelle image). L'image est au centre de la zone DIV et sa taille peut aller jusqu'à 950x633 pixels. Lorsque la page IFRAME est chargée, l'image de chargement sera masquée.

Ce que vous devez changer, c'est l'URL de l'image de votre site. Vous pouvez également modifier la couleur d'arrière-plan DIV (actuellement définie sur #FFF).

<style>
#loadImg{position:absolute;z-index:999;}
#loadImg div{display:table-cell;width:950px;height:633px;background:#fff;text-align:center;vertical-align:middle;}
</style>
<div id="loadImg"><div><img src="loading.gif" /></div></div>
<iframe border=0 name=iframe src="html/wedding.html" width="950" height="633" scrolling="no" noresize frameborder="0" onload="document.getElementById('loadImg').style.display='none';"></iframe>
30
Jay

Vous pouvez utiliser jquery pour déclencher le chargement d'une iframe

$('#iframeTest').on("load", function () {
    console.log('iframe loaded'); //replace with code to hide loader
});
0
Ramesh Narayan