1

私たちのウェブサイトでは、HTML キャンバスを使用して波状の線を描画します。波線が描画される前に、コンテンツが完全に読み込まれた後に要素の高さを測定するのコードを使用して、読み込まれるページの高さを測定し、drawlines.js スクリプトにコールバックして、完成した領域の寸法を取得し、波線を描画しますライン。

これは Chrome と Firefox では問題なく動作しますが、IE9 と 10 ではhttp://www.petersencreative.com/designなどのページで断続的に線を引くことができないようです。インスペクターで何も失敗していないので、問題を診断する方法、さらには修正する方法について途方に暮れています。

これはかなり具体的な問題だと思いますが、何かポインタがあれば本当に感謝しています。

編集: IE でコードが失敗すると、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);
    }
}

この関数はhttp://www.petersencreative.com/templates/320andup/js/drawlines.js内にあります

ピート

4

2 に答える 2

1

これらの画像を HTML ソースのタグを介してロード<img>していますか、それとも JavaScript で動的に作成していますか?

それらが HTML ソースにある場合、問題が発生する可能性があります。

JavaScript でそれらを作成している場合は、属性を設定する前loadにそれぞれのハンドラーを設定することで、いつ読み込まれたかを検出できるはずです。Image src

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

また：

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

または、イベント委任を使用できます。

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

最初にイベント ハンドラーを設定するときは、既にキャッシュされた画像を持つ IE であっても、すべての場合に呼び出す必要があります。

loadこれにより、ロード検出コードもより簡単になります。すでにロードされているイメージをテストするための特別なコードを用意する必要はありません。すべてのイメージのイベントに依存するだけです。

于 2013-08-06T17:12:56.217 に答える
0

それ以来、IE が画像をロードしたときに処理する非常に便利な js ライブラリを見つけました。これは、Paul Irish がこのトピックで行った作業に基づいています。

https://github.com/desandro/imagesloaded

于 2013-10-31T12:06:13.923 に答える