dogmap.jp

WordPress 用プラグイン WP-lightpop Ver.0.7.1 をリリースしました。
今回のリリースは初期バージョンからあった不具合の修正。
これで、しばらくバージョンアップしない予定です。

ダウンロードと使用方法は下記サイトを参照してください。
WordPress Plugins/JSeries » WP-lightpop

で、今回のバージョンで修正した不具合ですが…
グループ表示している画像を「NEXT」「PREV」ボタンで次画像を表示している際、たまにローディング画像が表示されっぱなしになって、次画像が表示されないことがある。
と言う不具合でした。
再現性に乏しく中々原因が究明できなかったんですが、ようやく修正できました。

画像ファイルを表示する際に、画像のサイズ(width,height)を取得するために Image オブジェクトを作成して src をセットし onload() で width, height を取得していました。
具体的には、以下のようなコード。

 var image_set = function(contentNo){
  image_load(arrContent[contentNo].href, (function(contentNo){return function(){
   arrContent[contentNo] = jQuery.extend(arrContent[contentNo], {
     content:'<img src="' + this.src.replace(/\?.*$/, '') + '" width="' + this.width + '" height="' + this.height + '" />'
    ,width:this.width
    ,height:this.height
   });
  }})(contentNo));
 }

 // image loader
 var objImageLoader = {};
 var image_load = function(src, callback){
  if (typeof objImageLoader[src] === 'undefined') {
   objImageLoader[src] = new Image();
   if (typeof callback === 'function') objImageLoader[src].onload = callback;
   objImageLoader[src].src = src;
  }
  return objImageLoader[src];
 }

ただ、このコードだとたまに onload が発生しないことがあったんですが、原因が分かりませんでした。
で、「完全に状況を掌握した画像の遅延読み」と言うエントリを参考に以下のようにコードを修正した結果、うまいこと動作するようになりました。

 var image_set = function(contentNo){
  image_load(arrContent[contentNo].href, (function(contentNo){return function(src, width, height){
   arrContent[contentNo] = jQuery.extend(arrContent[contentNo], {
     content:'<img src="' + src.replace(/\?.*$/, '') + '" width="' + width + '" height="' + height + '" />'
    ,width:width
    ,height:height
   });
  }})(contentNo));
 }

 // image loader
 var images = document.images;
 var image_load = function(src, onLoad, onError, delay, timeout) {
  onLoad  = onLoad  || function(){};
  onError = onError || function(){};
  delay   = delay   || 10;
  timeout = timeout || 2000;
  for (var i = 0, sz = images.length; i < sz; ++i) {
   if (images[i].src === src && images[i].complete) {
    onLoad(src, images[i].width, images[i].height);
    return;
   }
  }
  var img = new Image(), tick = 0;

  img.finish = false;
  img.onabort = img.onerror = function() {
   if (img.finish) { return; }
   img.finish = true;
   onError(src);
  };
  img.onload  = function() {
   img.finish = true;
   if (opera && !img.complete) {
    onError(src);
    return;
   }
   onLoad(src, img.width, img.height);
  };
  img.src = src;
  if (!img.finish && timeout) {
   setTimeout(function() {
    if (img.finish) { return; }
    if (img.complete) {
     img.finish = true;
     if (img.width) { return; }
     onError(src);
     return;
    }
    if ((tick += delay) > timeout) {
     img.finish = true;
     onError(src);
     return;
    }
    setTimeout(arguments.callee, delay);
   }, 0);
  }
 }

あと、ついでにウィンドウ・ページの表示領域のサイズを取得する関数 get_page_sizes() と、表示領域の左上の x,y 座標を取得する関数 get_page_scroll() も以下のように修正しました。

修正前

 var d = document;

 // get page sizes
 var get_page_sizes = function(){
  var xScroll,yScroll, windowWidth, windowHeight, pageHeight, pageWidth;
  xScroll = (d.documentElement && d.documentElement.scrollWidth)  ? d.documentElement.scrollWidth  : d.body.scrollWidth;
  yScroll = (d.documentElement && d.documentElement.scrollHeight) ? d.documentElement.scrollHeight : d.body.scrollHeight;
  if (d.compatMode && d.compatMode !== "BackCompat") {
    windowWidth  = d.documentElement.clientWidth;
    windowHeight = d.documentElement.clientHeight;
  } else {
    windowWidth  = d.body.clientWidth;
    windowHeight = d.body.clientHeight;
  }
  pageWidth  = (xScroll < windowWidth  ? xScroll : windowWidth);
  pageHeight = (yScroll < windowHeight ? windowHeight : yScroll);
  return new Array(pageWidth, pageHeight, windowWidth, windowHeight);
 };

 // get page scroll
 var get_page_scroll = function(){
  var x = (d.documentElement && d.documentElement.scrollLeft) ? d.documentElement.scrollLeft : d.body.scrollLeft;
  var y = (d.documentElement && d.documentElement.scrollTop)  ? d.documentElement.scrollTop  : d.body.scrollTop;
  return new Array(x, y);
 };

修正後

 var d = document;
 var e = document.documentElement, b = document.body;

 // get page sizes
 var get_page_sizes = function(){
  var back_compat = (d.compatMode && d.compatMode !== "BackCompat");
  var pageWidth  = (e && e.scrollWidth  ? e : b).scrollWidth;
  var pageHeight = (e && e.scrollHeight ? e : b).scrollHeight;
  var windowWidth  = (back_compat ? b : e).clientWidth;
  var windowHeight = (back_compat ? b : e).clientHeight;
  pageWidth  = (pageWidth  < windowWidth  ? pageWidth : windowWidth);
  pageHeight = (pageHeight < windowHeight ? windowHeight : pageHeight);
  return new Array(pageWidth, pageHeight, windowWidth, windowHeight);
 };

 // get page scroll
 var get_page_scroll = function(){
  var x = (e && e.scrollLeft ? e : b).scrollLeft;
  var y = (e && e.scrollTop  ? e : b).scrollTop;
  return new Array(x, y);
 };

やってることは変わりませんが、三項演算子をうまいこと使ってスッキリ書けましたね。満足