読み込み失敗した画像を再度取りに行くグリモン

javascript greasemonkey

AutoPagerizeなどを利用して、Ajaxでノードを追加したときに追加したノード中の画像読み込みに失敗することがあります。
まぁ、何が言いたいかというとニコニコのサムネが表示されなくてしょんぼりと

さて、どうしよう。
画像の読み込みイベント監視？とは言え、全ての画像のonErrorイベント監視するのはやってられない。
とりあえず、

  • setTimeoutで遅延評価
  • サイズが0なら読み込み失敗とみなす
  • 画像のsrcにダミーのクエリ文字列付加する
  • srcが変更されたので、再度画像読み込みが開始される

こんなもの考えてみました。

// ==UserScript==
// @name           reloadImg
// @namespace      http://d.hatena.ne.jp/TakiTake/
// @include        http://www.nicovideo.jp/*
// ==/UserScript==
var
  i = 0, // 毎回0個目から評価するのは、非効率的なのでiの値を使いまわす
  addQuery = function()
  {
    // 2秒後に実行
    setTimeout(function()
    {
      // document.imagesで全ての画像データが取れるので、forで回して評価
      var imgs = document.images;
      for (l = imgs.length; i < l; i++)
      {
        var img = imgs.item(i);

        // 高さ、幅共に0なら、再読み込み対象
        if ((img.clientHeight == 0) && (img.clientWidth == 0))
        {
          // すでにクエリ文字がある場合とない場合で、付加するクエリを変える。
          img.src += /\?/.test(img.src) ? '&dummy=dummy' : '?dummy=dummy';
        }
      }
    }, 2000);
  };

// ページロードイベント及び、id('PAGEBODY')に対するDOMツリー変更イベントで発火
window.addEventListener('load', addQuery, false);
document.getElementById('PAGEBODY').addEventListener('DOMSubtreeModified', addQuery, false);


精度はいまいちでした。残念。
読み込み対象の評価をすり抜けちゃうパターンと、再読み込みでも失敗するパターンが何件か
あと、２秒という時間設定も根拠無しなのが問題。