2

ページのサイズが変更されたら、そこにある現在の要素を上書きして、要素を複製する必要があります。

動作しない私の現在のコードは次のとおりです。

var clone = false;
window.addEvent("domready",function(){
    clone = $$('.view').clone();
    /* Wait for images to be 100% loaded otherwise they might not have width/height */
    var lazyloader = new LazyLoad({
        onComplete: function(){
            setupWall();
            window.addEvent('resize:throttle(1000)', function(){
                /* Delete old viewport and add back with cloned version */
                var view = $$('.view');
                if(view){
                    wall = null;
                    view.dispose();
                }
                var cloneElement = $$('#wrapper').inject(clone);
                console.log(cloneElement);
                //setupWall();
            });
        }
    });
});

実行する$$('#wrapper').inject(clone);と、次のエラーが表示されます。

null のメソッド 'appendChild' を呼び出すことはできません

ここのコメントで示唆されているように、htmlも同様です。

<div id="wrapper">  
    <section class="view" id="wall">
        <div class="panel" id="panel1"><img src="_assets/images/loading.gif" data-src="http://placekitten.com/701/310" /></div>
        <div class="panel" id="panel2"><img src="_assets/images/loading.gif" data-src="http://placekitten.com/702/320" /></div>
        <div class="panel" id="panel3"><img src="_assets/images/loading.gif" data-src="http://placekitten.com/703/330" /></div>
        <div class="panel" id="panel4"><img src="_assets/images/loading.gif" data-src="http://placekitten.com/704/340" /></div>
        <div class="panel" id="panel5"><img src="_assets/images/loading.gif" data-src="http://placekitten.com/705/350" /></div>
        <div class="panel" id="panel6"><img src="_assets/images/loading.gif" data-src="http://placekitten.com/706/360" /></div>
        <div class="panel" id="panel7"><img src="_assets/images/loading.gif" data-src="http://placekitten.com/707/370" /></div>
        <div class="panel" id="panel8"><img src="_assets/images/loading.gif" data-src="http://placekitten.com/708/380" /></div>
        <div class="panel" id="panel9"><img src="_assets/images/loading.gif" data-src="http://placekitten.com/709/390" /></div>
        <div class="panel" id="panel10"><img src="_assets/images/loading.gif" data-src="http://placekitten.com/710/400" /></div>
        <div class="panel" id="panel11"><img src="_assets/images/loading.gif" data-src="http://placekitten.com/711/410" /></div>
    </section>
</div>
4

1 に答える 1

3

$$()コレクションを返します。単一の要素が本当に必要な場合は、コレクションを複製しないでください。

id で単一の要素を取得する場合は、$("id");- if by selector document.getElement('.class')(または any node.getElement) を使用します。$ は jquery のようではなく、document.getElementById().

また、element.inject(target)- コレクションではなく単一のエル - vstarget.adopt(element(s)) 

window.addEvent("domready",function(){
    var clone = document.getElement('.view').clone();
    /* Wait for images to be 100% loaded otherwise they might not have width/height */
    var lazyloader = new LazyLoad({
        onComplete: function(){
            setupWall();
            window.addEvent('resize:throttle(1000)', function(){
                /* Delete old viewport and add back with cloned version */
                var view = $$('.view');
                if(view.length){
                    wall = null;
                    view.destroy();
                }
                var cloneElement = $('wrapper').adopt(clone);
                console.log(cloneElement);
                //setupWall();
            });
        }
    });
});
于 2013-02-27T17:13:23.917 に答える