Javascript : Comment "tuer" le chargement d'un objet ?

Question

Je fais référence à des objets (images, scripts, iframes, etc.) provenant d'autres sites web. Parfois, l'autre site est indisponible et je dois attendre environ 30 secondes pour que mon navigateur "saute" l'objet. Comment puis-je "sauter" l'objet après, par exemple, 5 secondes ?

Voici un exemple de code :

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.6.2.min.js"><\/script>')</script>

Answer 1

Vérifier yepnope . Voici un extrait de sa page d'accueil :

yepnope.js a la capacité de des scripts dépendants parallèlement au premier. Plus clairement :

yepnope([{
  load: 'http:/­/ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js',
  complete: function () {
    if (!window.jQuery) {
      yepnope('local/jquery.min.js');
    }
  }
}, {
  load: 'jquery.plugin.js',
  complete: function () {
    jQuery(function () {
      jQuery('div').plugin();
    });
  }
}]);

Je suggère d'étudier yepnope et d'autres chargeurs script existants avant de décider de créer le vôtre. Ces chargeurs sont assez petits (yepnope prétend faire 1,6 kB), il n'y a donc pas grand chose à gagner en écrivant votre propre solution.

Answer 2

HTML5 a la async pour l'attribut script qui compense cette difficulté en permettant aux scripts de se charger de manière asynchrone. Certains navigateurs implémentent en outre un élément non standard defer qui est similaire, mais pas exactement la même . En ce qui concerne les ressources autres que scripts Pour les images, vous pouvez utiliser JavaScript pour les charger de manière asynchrone (par exemple, en créant l'élément image à la volée). L'inconvénient de cette approche est que si votre JavaScript asynchrone provoque ensuite le chargement d'images asynchrones, vous courez un risque très élevé d'une erreur de type FOUC .