0

さて、私はプロジェクトのためにやらなければならないポートフォリオを持っています。フロントページはローダーを備えた単なるdivであり、フロントページにアクセスすると、画面サイズが検出され、ajaxで取り込むコンテンツが選択されます。

iPad / Mobileサイトは本当にシンプルで、別のサイトを作成するのに十分な時間がなかったので、私はこの方法でそれを行っています。そのため、それは本当にシンプルなバージョンです。

私の問題は、InternetExplorerではまったく機能しないことです。コンテンツをロードしているように見えますが、プラグインの適用やローダーの非表示など、ロード後の機能は実行されません。

画像のカウントを開始すると壊れた感じがするので、Modernizerを使用して、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
4

1 に答える 1

2

さて、私は頭の中で変数を作成することになり、Internet Explorerを使用している場合は、プリロードのようなハッキーなものは得られないが、学校の課題のサイトであるため、それを実行する必要があると判断しました。

<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
于 2012-12-02T21:52:43.953 に答える