jQuery Girl
  1. jQuery Girl
  3. Jquery Preloader a cessé de fonctionner dans IE
Intereting Posts
requireJS avec JQuery, Masonry, & ImagesLoaded: Object n’a pas de méthode ‘imagesLoaded’ window.open et $ (document) .ready Comment faire en sorte que la fenêtre contextuelle de la boîte aux lettres rest ouverte et que le contenu de la boîte aux lettres change après la soumission Comment faire pour que les mediaqueries CSS fonctionnent avec jQuery $ (window) .innerWidth ()? Comment formater la date affichée dans Datatable Existe-t-il une solution jQuery qui utilise CORS lorsqu’elle est disponible et utilise XDomainRequest sur MSIE et JSONP sur des navigateurs dotés de niether? contenu fancybox iframe et recherche google Autocomplete jQuery Plugin: Valeur de l’index de tableau sélectionné Comment redirect avec Flask et jQuery WordPress, fichiers CSS jQuery UI? Supprimer l’événement sélectionné du calendrier Bouton Ruby on Rails jQuery cliquez sur peupler text_field Jquery stop fadeTo effect Comment append une classe personnalisée à mon Datepicker de l’interface utilisateur JQuery getJSON n’honore pas async: false

Jquery Preloader a cessé de fonctionner dans IE

Modifier:

J’ai un problème de préchargement d’images multiples avec lequel je rencontre des problèmes avec IE, et des personnes ont mentionné que la raison en est la mise en cache. Je suis en train d’explorer des alternatives qui me permettraient de:

  • Précharger un ensemble prédéfini d’images car mon contenu est chargé via ajax
  • Être autorisé à définir ces images comme arrière-plans CSS

Voici le site de démonstration (fonctionne dans tous les navigateurs sauf IE)

Et voici à quoi ressemble le code en ce moment:

Cela a l’air long, mais c’est surtout du code répété 

var src1 = 'img/map_bg_1680.jpg' , $img1 = $( '' ); var src2 = 'img/menu-background.png' , $img2 = $( '' ); var src3 = 'img/button01.png' , $img3 = $( '' ); var src4 = 'img/button02.png' , $img4 = $( '' ); var src5 = 'img/button03.png' , $img5 = $( '' ); var src6 = 'img/button04.png' , $img6 = $( '' ); var src7 = 'img/button05.png' , $img7 = $( '' ); var src8 = 'img/button06.png' , $img8 = $( '' ); var src9 = 'img/all_events_button.png' , $img9 = $( '' ); var src10 = 'img/all_venues_button.png' , $img10 = $( '' ); var src11 = 'img/event_finder_button.png' , $img11 = $( '' ); var src12 = 'img/today-button.png' , $img12 = $( '' ); var src13 = 'img/tomorrow-button.png' , $img13 = $( '' ); var src14 = 'img/some-other-day-button.png' , $img14 = $( '' ); var src15 = 'img/choose-button.png' , $img15 = $( '' ); var src16 = 'img/newsearch-button.png' , $img16 = $( '' ); var src17 = 'img/showresults-button.png' , $img17 = $( '' ); $(document).ready(function() { $(".ajax").colorbox(); var img1loaded = false , img2loaded = false , img3loaded = false , img4loaded = false , img5loaded = false , img6loaded = false , img7loaded = false , img8loaded = false , img9loaded = false , img10loaded = false , img11loaded = false , img12loaded = false , img13loaded = false , img14loaded = false , img15loaded = false , img16loaded = false , img17loaded = false; $img1.bind( 'load', function(){ img1loaded = true; finish(); } ); $img2.bind( 'load', function(){ img2loaded = true; finish(); } ); $img3.bind( 'load', function(){ img3loaded = true; finish(); } ); $img4.bind( 'load', function(){ img4loaded = true; finish(); } ); $img5.bind( 'load', function(){ img5loaded = true; finish(); } ); $img6.bind( 'load', function(){ img6loaded = true; finish(); } ); $img7.bind( 'load', function(){ img7loaded = true; finish(); } ); $img8.bind( 'load', function(){ img8loaded = true; finish(); } ); $img9.bind( 'load', function(){ img9loaded = true; finish(); } ); $img10.bind( 'load', function(){ img10loaded = true; finish(); } ); $img11.bind( 'load', function(){ img11loaded = true; finish(); } ); $img12.bind( 'load', function(){ img12loaded = true; finish(); } ); $img13.bind( 'load', function(){ img13loaded = true; finish(); } ); $img14.bind( 'load', function(){ img14loaded = true; finish(); } ); $img15.bind( 'load', function(){ img15loaded = true; finish(); } ); $img16.bind( 'load', function(){ img16loaded = true; finish(); } ); $img17.bind( 'load', function(){ img17loaded = true; finish(); } ); function finish(){ if( !img1loaded || !img2loaded || !img3loaded || !img4loaded || !img5loaded || !img6loaded || !img7loaded || !img8loaded || !img9loaded || !img10loaded || !img11loaded || !img12loaded || !img13loaded || !img14loaded || !img15loaded || !img16loaded || !img17loaded ){ return; } jQuery('#main-content-fiftyfive').load('index2.html', function() { $( '#bgDiv' ).css( 'background-image', 'url( https://stackoverflow.com/questions/8843283/jquery-preloader-stopped-working-ie/' + src1 + ')' ); jQuery( '#viewport-container' ).css( 'background-image', 'url( https://stackoverflow.com/questions/8843283/jquery-preloader-stopped-working-ie/' + src2 + ')' ); jQuery( '#events_map_button' ).css( 'background-image', 'url( https://stackoverflow.com/questions/8843283/jquery-preloader-stopped-working-ie/' + src3 + ')' ); jQuery( '#event_search_tool_button' ).css( 'background-image', 'url( https://stackoverflow.com/questions/8843283/jquery-preloader-stopped-working-ie/' + src4 + ')' ); jQuery( '#party_photos_button' ).css( 'background-image', 'url( https://stackoverflow.com/questions/8843283/jquery-preloader-stopped-working-ie/' + src5 + ')' ); jQuery( '#taxi_finder_button' ).css( 'background-image', 'url( https://stackoverflow.com/questions/8843283/jquery-preloader-stopped-working-ie/' + src6 + ')' ); jQuery( '#weather_forecast_button' ).css( 'background-image', 'url( https://stackoverflow.com/questions/8843283/jquery-preloader-stopped-working-ie/' + src7 + ')' ); jQuery( '#contact_button' ).css( 'background-image', 'url( https://stackoverflow.com/questions/8843283/jquery-preloader-stopped-working-ie/' + src8 + ')' ); $('#right-content').load('partytool.html', function() { setPartyToolsButtons(); $('#whole-ajax-content-one').load('events.html', function() { setDayChooserButtons(); $( '.preloader' ).fadeOut('slow', function() { $( '#bgDiv' ).fadeIn('slow', function() { $( '#table-holder' ).fadeIn('slow', function() { initialConfig(); }); }); }); }); }); }); } if( $img1[0].width ){ $img1.sortinggger( 'load' ); } if( $img2[0].width ){ $img2.sortinggger( 'load' ); } if( $img3[0].width ){ $img3.sortinggger( 'load' ); } if( $img4[0].width ){ $img4.sortinggger( 'load' ); } if( $img5[0].width ){ $img5.sortinggger( 'load' ); } if( $img6[0].width ){ $img6.sortinggger( 'load' ); } if( $img7[0].width ){ $img7.sortinggger( 'load' ); } if( $img8[0].width ){ $img8.sortinggger( 'load' ); } if( $img9[0].width ){ $img9.sortinggger( 'load' ); } if( $img10[0].width ){ $img10.sortinggger( 'load' ); } if( $img11[0].width ){ $img11.sortinggger( 'load' ); } if( $img12[0].width ){ $img12.sortinggger( 'load' ); } if( $img13[0].width ){ $img13.sortinggger( 'load' ); } if( $img14[0].width ){ $img14.sortinggger( 'load' ); } if( $img15[0].width ){ $img15.sortinggger( 'load' ); } if( $img16[0].width ){ $img16.sortinggger( 'load' ); } if( $img17[0].width ){ $img17.sortinggger( 'load' ); } });

J’apprécie la consortingbution de chacun, merci 🙂

il s’agit essentiellement de votre application, le chargement des images + HTML réécrit pour utiliser l’object différé de jQuery

http://jsfiddle.net/roberkules/hH8YN/ -> fonctionne pour moi sur IE8, FF9 et Chrome16

la partie principale du script est: 

 var images = { 'bg': 'img/map_bg_1680.jpg' // ... }; var defer = $.Deferred(); var promise = $.when.apply($, $.merge([defer.promise()], $.map(images, function(value, key) { var d = $.Deferred(), img = $('').attr('src', root_path + value).load(function() { console.log('loaded img', key, value); d.resolve(); }).get(0); if (img.complete) { console.log('cached img', key, value); d.resolve(); } else { window.setTimeout(function() { if (!d.isResolved()) { console.log('timeout img', key, value); d.resolve(); } }, 15000); // eg: 15 seconds timeout } return d.promise(); }))); $(function() { $.get('index2.html', function(data) { console.log('loaded html', 'index2.html'); $('#main-content-fiftyfive').html(data.responseText || data); defer.resolve(); }); promise.done(function() { // index2.html + images loaded... } });

(dû utiliser quelques hacks mineurs, juste parce que le contenu est sur votre hôte, donc vous pouvez évidemment supprimer ces hacks pour votre page)

Essayez ceci à la place … 

 $(function() { var imgCount = $("img").length; $("img").one("load", function() { imgCount--; if (imgCount == 0) finish(); }).each(function() { if (this.complete) $(this).load(); }); });

Fondamentalement, sur document.ready, il reçoit le nombre total d’images, puis attend qu’elles soient toutes chargées avant de lancer la méthode finish (). Ne vous inquiétez pas des valeurs booléennes dans finish () – commentez cela. Mettez également en commentaire tous vos gestionnaires .load ().

Cela prend en compte la mise en cache, avec la vérification (this.complete). J’ai beaucoup utilisé cette technique et elle s’est révélée très utile.

Votre manière de pré-charger les images ne prend pas en compte l’image mise en cache. S’il est mis en cache, il se peut que l’événement de chargement ne soit pas toujours déclenché.

Voici un plugin qui précharge les images.

https://github.com/tentonaxe/jQuery-preloadImages