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
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.