Chris G-Jones
Reputation: 626
ajax load not working in ie
ok so I have a portfolio I have to do for a project, the front page is just a div with a loader and when you land on the front page it detects the screen size and chooses what content to pull in with ajax.
I am doing it this way because the iPad/Mobile site is really simple and I didn't have enough time to make another site so its just a really simple version.
My problem is that it does not work in internet explorer at all. It seems to load the content in, but does not do any of the functions after the load, such as applying plugins and hiding the loader.
I have a feeling its breaking when it starts counting the images, so I was wondering if I could use modernizer to detect if its internet explorer and do a simpler load function, or is there something wrong with my code?
The link to the site is http://chris-g.dmlive.co.nz/
and the load function is as follows
function loadSites(){
var $winHeight = $window.height();
var $winWidth = $window.width();
if($window.width() >= 1025) {
// is desktop so load all scripts and set heights to window height
var $loadCont = $('.full-page');
var sourceTarget = '#ninja';
var pageUrl='http://chris-g.dmlive.co.nz/ninja/';
$loadCont.load(pageUrl+" "+sourceTarget, function(){
var $slide = $('.slide');
var $ninja = $('#ninja');
//var $imgs = $(this).find("img");
var $imgs = $ninja.find("img");
$imgs.hide();
var loadCounter = 0;
var nImages = $imgs.length;
$imgs.load(function () {
loadCounter++;
if(nImages === loadCounter) {
// all the images have loaded
// reveal them, remove the loading indicator
$imgs.show();
$slide.css({'height':$winHeight});
$('#ninja-content').show();
$('.page-loader').fadeOut(500);
$ninja.interactiveScrolling();
$('#intro').parallaxScrolling();
$('#contact-form').formValidation();
$('#portfolio').portfolioAnimations();
callPopAnimations();
}
// trigger load event if images have
// been cached by the browser
}).each(function () {
if(this.complete) {
$(this).trigger("load");
}
});
}), function(){
}; // end ajax load
} else {
// is a touch device so load in the stripped back site
var $loadCont = $('.full-page');
var sourceTarget = '#basic-content';
var pageUrl='http://chris-g.dmlive.co.nz/basic-page/';
$loadCont.load(pageUrl+" "+sourceTarget, function(){
var $basicContent = $('#basic-content');
//var $imgs = $(this).find("img");
var $imgs = $basicContent.find("img");
$imgs.hide();
var loadCounter = 0;
var nImages = $imgs.length;
$imgs.load(function () {
loadCounter++;
if(nImages === loadCounter) {
// all the images have loaded
// reveal them, remove the loading indicator
$imgs.show();
$('#portfolio').loadProjectBasic();
$('#contact-form').formValidation();
$('.page-loader').fadeOut(500);
$('#ninja-content').show();
}
// trigger load event if images have
// been cached by the browser
}).each(function () {
if(this.complete) {
$(this).trigger("load");
}
});
}); // end ajax load
} // end if window width
} // end loadSites
Upvotes: 0
Views: 445
Answers (1)
Chris G-Jones
Reputation: 626
Ok so I ended up making a variable in the head and decided that if you were using internet explorer you would not get the preloading, kind of hacky but needed to get it done as it was a site for a school assignment.
<script>isExplorer = false;</script>
<!--[if IE]>
<script>isExplorer = true;</script>
<![endif]-->
and then adding an if statement to my jQuery
function loadSites(callback){
var $winHeight = $window.height();
var $winWidth = $window.width();
if($window.width() >= 1025) {
// is desktop so load all scripts and set heights to window height
var $loadCont = $('.full-page');
var sourceTarget = '#ninja';
var pageUrl='http://chrisgjones.com/ninja/';
$loadCont.load(pageUrl+" "+sourceTarget, function(){
var $slide = $('.slide');
var $ninja = $('#ninja');
var $ninjaCont = $('#ninja-content');
var $pageLoader = $('.page-loader');
var $intro = $('#intro');
var $contactForm = $('#contact-form');
var $portfolio = $('#portfolio');
if(isExplorer == true){
//alert('is ie');
$slide.css({'height':$winHeight});
$ninjaCont.show();
$ninja.interactiveScrolling();
$intro.parallaxScrolling();
$contactForm.formValidation();
$portfolio.loadProjectBasic();
//callPopAnimations();
$pageLoader.hide();
}else if(isExplorer == false){
//alert('is not ie');
//var $imgs = $(this).find("img");
var $imgs = $ninja.find("img");
$imgs.hide();
var loadCounter = 0;
var nImages = $imgs.length;
$imgs.load(function () {
loadCounter++;
if(nImages === loadCounter) {
// all the images have loaded
// reveal them, remove the loading indicator
$imgs.show();
$slide.css({'height':$winHeight});
$ninjaCont.show();
$ninja.interactiveScrolling();
$intro.parallaxScrolling();
$contactForm.formValidation();
$portfolio.portfolioAnimations();
callPopAnimations();
//$('.page-loader').hide();
callback.call();
} // end counter
// trigger load event if images have
// been cached by the browser
}).each(function () {
if(this.complete) {
$(this).trigger("load");
} // end cache trigger load
}); // end each
} // end if is explorer or good browser
}); // end load
} else {
// is a touch device so load in the stripped back site
var $loadCont = $('.full-page');
var sourceTarget = '#basic-content';
var pageUrl='http://chrisgjones.com/basic-page/';
$loadCont.load(pageUrl+" "+sourceTarget, function(){
var $basicContent = $('#basic-content');
//var $imgs = $(this).find("img");
var $imgs = $basicContent.find("img");
$imgs.hide();
var loadCounter = 0;
var nImages = $imgs.length;
$imgs.load(function () {
loadCounter++;
if(nImages === loadCounter) {
// all the images have loaded
// reveal them, remove the loading indicator
$imgs.show();
$('#portfolio').loadProjectBasic();
$('#contact-form').formValidation();
$('.page-loader').hide();
$('#ninja-content').show();
}
// trigger load event if images have
// been cached by the browser
}).each(function () {
if(this.complete) {
$(this).trigger("load");
} // end cache trigger load
}); // end each
}); // end ajax load
} // end if window width
} // end loadSites
Upvotes: 2
Related Questions
- .load() does not work on IE
- Ajax not loading in IE
- jQuery load() doesn't work on IE
- JQuery load function works in Chrome, but nothing happens in IE
- jQuery .load() problem in all IE versions
- jQuery not working in IE, works in other browsers
- $.load() is not working in ie
- jQuery load() doesnt work on IE?
- jQuery load() not working in Internet Explorer
- jquery load not working in IE8