responsive.org - Runaway javascript

[hoosteeno]

URL: http://responsive.org/2014/03/the-operating-model/
Browser: Firefox
Version: 31.0
Problem type: Looks like the website has a bug.
Site owner: Unknown

Steps to Reproduce

1. Open web console.
2. Navigate to http://responsive.org/2014/03/the-operating-model/
3. Watch javascript error count increase by 50 per second.

[miketaylr]

Uncaught TypeError: Cannot read property 'complete' of undefined, from script.js. And also happening in Chrome.

Confirmed from here. Here's the offending code, needs analysis:

/*  FlexSlider
/* ------------------------------------ */
    var firstImage = jQuery('.flexslider').find('img').filter(':first'),
        checkforloaded = setInterval(function() {
            var image = firstImage.get(0);
            if (image.complete || image.readyState == 'complete' || image.readyState == 4) {
                clearInterval(checkforloaded);
                jQuery('.flexslider').flexslider({
                    animation: "slide",
                    useCSS: false, // Fix iPad flickering issue
                    slideshow: false,
                    directionNav: true,
                    controlNav: true,
                    pauseOnHover: true,
                    slideshowSpeed: 7000,
                    animationSpeed: 400,
                    smoothHeight: true,
                    touch: false
                });
            }
        }, 20);

[miketaylr]

OK, so the problem is firstImage is undefined and they're checking it every 20ms. :/

> jQuery('.flexslider').find('img').filter(':first').length
0

Inside of checkforloaded, they should first check for the existence of that DOM element before trying to get its properties (by checking the length property of the jQuery property like above.

[miketaylr]

Tweeted at them: https://twitter.com/miketaylr/status/481554544086634496

[miketaylr]

It seems like either the site was rebuilt (the URL 404s), or they fixed this--I don't see similar errors anywhere else.