m2

Togetter を下までスクロールすると重くなっていたので Lazy Load Plugin for jQuery にパッチを書いた

javascript

https://github.com/miya2000/jquery_lazyload/commit/a739355d631209f0e482f7523dbc436aac05dba4

Togetter でとトギャられたページを下までスクロールすると重くなっているのを確認しました。たしか Chrome, Firefox だとそれほどでもなかった気がしますが、Opera, ie では顕著です。

何が起こっているのかといいますと、Togetter では Lazy Load Plugin for jQuery を使って画像の遅延ロードを行っているのですが、

この「原発」・「被災」等の注目のキーワードの下にけっこうな数の画像（はてブ数、Twitterアイコン）があるのですね。これが LazyLoad できずにスクロールイベント毎に、残りの画像すべて(100個くらい)をループで回していました。スクロールイベントはホイール1回で3回くらい発生しますので、これまたけっこうな数です。

	var counter = 0;
	elements.each(function() {
	    if ($.abovethetop(this, settings) ||
	        $.leftofbegin(this, settings)) {
	            /* Nothing. */
	    } else if (!$.belowthefold(this, settings) &&
	        !$.rightoffold(this, settings)) {
	            $(this).trigger("appear");
	    } else {
	        if (counter++ > settings.failurelimit) {
	            return false;
	        }
	    }
	});

非表示の画像は最初の if ブロックに入りますので、$.abovethetop がぼちぼち重たいということになります。
これを避けるため、、ループの先頭で非表示の画像は読み飛ばすコードを追加しました。

一番下までスクロールしないと再現しないのは、それまでは最後の else に入って、途中でループを終えていたからです*1。

  • -

Lazy Load Plugin for jQuery　は

Lazy Load is currently not usable. It does not work with the latest browsers as expected. I have currently no time updating the code myself.

http://www.appelsiini.net/projects/lazyload

とご本人がおっしゃっているように、今後積極的にアップデートされることは無いと思われます。
実装をみるとまだまだ改善できるところはあると思いますので、どなたか挑戦してみるとよいのではないでしょうか。

  • -

Togetter さんでは、上のパッチを適用するのもいいですが、そもそも該当部分の LazyLoad は不要だと思うので、外してもらうのがいいのではないかと思います。

  • -

Togetter の application.js は minify されていたのですが、id:os0x が紹介してくれていた Chrome の Developer Tools を使うことで難なくデバッグすることが出来ました。Opera でもできるといいですね。

  • -

Opera でページ側のスクリプトをハックする時は、こんな user.js を書いて、ページ側のスクリプトを上書きしています。

// ==UserScript==
// @include http://togetter.com/li/*
// ==/UserScript==
(function(){
    opera.addEventListener('AfterScript', function(e) {
        var script = e.element;
        if (script.src && /application\.js/.test(script.src)) {
            _ll(jQuery);
        }
    }, false);

    function _ll($) {
        ...

*1:画像を上から走査していき、表示領域より下に位置する画像が settings.failurelimit 個(2個)見つかったらループを終える、という実装です