resize() mishbehave, why?

[Violet_82]

HI, I've just run into something peculiar. Let me explain the functionality of the site I'm working on first http://antonioborrillo.co.uk/agency_test/home.html . Every time the site gets resized - if you resize the browser window or if you change orientation on the device you 're using - I recalculate the height of the 4 sections or pseudo-pages (it's a 1 page website). SO obviously I'm using resize(). Now, it all works OK, except for mobile browser (well, at least this is where I spotted the issue and I'm testing on chrome in Android): if I scroll in one direction, say down and then up, that's when a problem occurs: the page snaps, as if it's repositioning itself, it doesn't snap hundreds of pixels, but enough to be quite noticeable. Can somebody test this as well on chrome android and let me know if they get this issue? Does anybody know why that happens?
thanks

I just tried to run this in my desktop and it crunched - almost to a halt on first visit. May have a look later on android.

Have a look at your page load times / Inspect Element data.

[Violet_82]

Hi diafol,
so I cleared my cache and checked the values, as I did expect them to be quite high (time of page load and size) because I have really big images there - see screenshot here http://s14.postimg.org/h7g3pd969/net_Panel.jpg - but I've never really had any crash as such, the first time I load the site I do see the images populating the container though, but I knew that already and I thought, well will leave with that. I mean it would be nice to sort this out as well, but the images need to be big unfortunately. Saying that, I've just noticed they are .PNGs, so I'll save them as .JPGs, that's will help to bring down the size and the download time I'm sure. More important than that, is that business of the page snapping into some position that seems to be happening only on android, in chrome specifically, (I checked on the iphone and it is all OK), and I can only think of one cause really, that $(window).resize() that runs everytime the page is resized, and in android is seems to run also when the page isn't resized, so I was wondering if there is a bug in android or that's the way it is supposed to work. If you manage to check on android please let me know.

[Violet_82]

Right, so I've done a few things:
1)as said I changed the png into jps, and, well, that did help as the size of the website has gone down as well as the download time.
2) done some readings, and found an interesting article, http://gomakethings.com/javascript-resize-performance/. I thought I'd give this throttling a go, so I've implemented the solution described there, which, in brief, puts a timer in place inside the resize()function and calls another function that does what you want to happen on resize every XX as opposed to let the $(window).resize() do its work. Alas, this hasn't made any difference whatsoever, in chrome android (it's android 5 by the way) I still get this page snapping when I change the direction of the manual scrolling. You can see the two versions here:
-without timer: http://antonioborrillo.co.uk/agency_test/home.html
-with timer: http://antonioborrillo.co.uk/agency_test/test/home.html

If we want to delve into the code, then, let's have a look. Here is the portion of the js with the timer:

$(document).ready(function(){   
    var is_open;//navigation status, open or closed
    var resizeTimer; // Set resizeTimer to empty so it resets on page load
    ...
    function resizeFunction() {
        console.log("resize called");
       // Stuff that should happen on resize
        setHeight($(".pseudoPage"));//set height of pseudo pages on resize
        /* $('html, body').animate({//scroll back up to the top
            scrollTop:0
        },100); */  
        resizeCarousel();
    };
    $(window).resize(function(){//when window resize
        clearTimeout(resizeTimer);
        resizeTimer = setTimeout(resizeFunction, 250);

        //setHeight($(".carouselImages .imageWrapper ul img"));

    });


function setHeight(toSet){//recalculate and set height of pseudo pages
    var browserHeight = calculateBrowserHeight();//height of browser
    //set new height    
    $(toSet).css("min-height", browserHeight);//with min-height we can then add as much content as we need
    //container with footer needs different height
    /* $(".pseudoPage").each(function(index){//run thru all pseudo-pages
        //console.log("div " + index);
        if($(this).find("div.footer").length){//if this has the footer
            //console.log("found " + index);
            var footerHeight = $("div.footer").height();//get the height of footer
            var divHeight = $(this).height();//get the height of this whole pseudo-page
            //console.log("this has a footer " + footerHeight);
            $(this).css("min-height", divHeight + footerHeight);//calculate and set new min height of page with footer
        }//end if
    });//end each    */
}

And here is the relevant js without the timer:

$(window).resize(function(){//when window resize
        //setHeight($(".carouselImages .imageWrapper ul img"));
        setHeight($(".pseudoPage"));//set height of pseudo pages on resize
        $('html, body').animate({//scroll back up to the top
            scrollTop:0
        },100); 
        resizeCarousel();
    });
function setHeight(toSet){//recalculate and set height of pseudo pages
    var browserHeight = calculateBrowserHeight();//height of browser
    //set new height
    $(toSet).height(browserHeight);
}

Those big images are still making the site pretty horrible on first visit. Unusable on my Android - as was on DATA!! You've just blown my monthly allowance! Had to bail out. Sorry.

[Violet_82]

Uh, I'm really sorry diafol (what's your monthly allowance?!), not sure if you checked before or after I changed the images. The site is now 6MB, pretty good compared to the over 16MB I had before. Of course still heavy for 3G, but the images need to be big. If you manage to get your android device on the wireless please have a look :-)
thanks anyway

[Violet_82]

I think the problem might be due to the fact that when you scroll up in chrome in android, the address bar disappears and when you scroll down it appears again.