CODEWITHSUNDEEP
jqueryinternet-explorercanvas
Jeepstone
Jeepstone

Reputation: 2601

HTML Canvas is drawn intermittently in IE

On our website we draw a wiggly line using HTML canvas. Before the wiggly line is drawn, I measure the height of the page being loaded using the code at Measure height of element after content is fully loaded and then callback to my drawlines.js script which takes the dimensions of the finished area and draws the wiggly line.

This works fine in Chrome and Firefox but IE9 and 10 seem to intermittently fail to draw the lines on pages such as http://www.petersencreative.com/design. I can't see anything failing in the inspector so I'm at a loss as how to diagnose the problem, let alone fix it.

I appreciate this is a fairly specific problem, but would be really grateful of any pointers.

EDIT: When the code fails in IE, it only ever gets to Alert 0.

function watchForBottomDimension(element, callback) {
    var $element, images, loaded;

    // Get a jQuery wrapper for `element`
    $element = jQuery(element);
    alert('0');
    // Find the images within it that aren't loaded yet
    images = $element.find("img").filter(function(index, img) {
        return !img.complete;
    });

    // Find any?
    if (images.length === 0) {
        // No, we're done -- call the callback asynchronously for
        // consistency with the case below where we have to wait
        alert('1');
        setTimeout(done, 0);
    }
    else {
        // We're waiting for some images, do that
        loaded = 0;
        images.load(function() {
            // One of them loaded; was it the last one?
            if (++loaded === images.length) {
                // Yup, we're done
                alert('2');
                done();
            }
        }); 
    }

    // Handle completion
    function done() {
        var top, height, bottom;

        top = $element.offset().top; // Vert offset of element
        height = $element.outerHeight(true); // Height of element

        // Offset to bottom of element
        bottom = top + height;

        // Call the callback with the value

        callback(element, bottom);
    }
}

This function is within http://www.petersencreative.com/templates/320andup/js/drawlines.js

Pete

Upvotes: 1

Views: 125

Answers (2)

Jeepstone
Jeepstone

Reputation: 2601

I have since found a very useful js library that handles when IE has loaded images which is based on the work that Paul Irish did on the topic.

https://github.com/desandro/imagesloaded

Upvotes: 0

Michael Geary
Michael Geary

Reputation: 28870

Are you loading these images via <img> tags in the HTML source, or by dynamically creating them in JavaScript?

If they are in the HTML source you may have trouble.

If you're creating them in JavaScript, then you should be able to detect when they are loaded by setting the load handler for each Image before setting its src attribute:

var img = document.createElement( 'img' );
img.onload = function() { /* ... */ };
img.src = 'test.png';
element.appendChild( img );

or:

$('<img>')
    .load( function() {
        /* ... */
    })
    .attr( 'src', 'test.png' )
    .appendTo( $element );

Or for that matter you could use event delegation:

// Before loading any of the images
$(element).on( 'load', 'img', function() {
    /* ... */
});
// Now you can start creating and loading the image elements

When you set up the event handler first, should be called in all cases, even in IE with an already-cached image.

This also makes your load-detection code much more straightforward: You don't have to have special code to test for images that are already loaded, you simply rely on the load event for all of them.

Upvotes: 1

Related Questions