好吧所以我有一个我需要为项目做的投资组合,首页只是一个带有加载器的div,当你登陆首页时它会检测屏幕大小并选择用ajax引入的内容。
我这样做是因为iPad / Mobile网站非常简单,我没有足够的时间制作另一个网站,所以它只是一个非常简单的版本。
我的问题是它根本不适用于Internet Explorer。 它似乎加载了内容,但在加载后没有执行任何功能,例如应用插件和隐藏加载器。
当它开始计算图像时,我有一种感觉,所以我想知道我是否可以使用现代化器来检测它的Internet Explorer并执行更简单的加载功能,或者我的代码是否有问题?
该网站的链接是http://chris-g.dmlive.co.nz/
,加载功能如下
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
答案 0 :(得分:2)
好的,所以我最终在头部制作了一个变量,并决定如果你使用的是Internet Explorer,你就不会得到预加载,有点像hacky但需要完成它,因为它是一个学校作业的网站。 / p>
<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