【改訂版】はてなブログの画像ポップアップをオリジナル画像に変える

2020.11.06 はてなブログ

前記事で、はてなブログの画像ポップアップ機能を表示画像そのものではなくオリジナル画像に変更する Javascript を公開したのですが、画像のファイル容量が大きい場合にダウンロードの待ち時間中の画面に変化がなく停止と勘違いしてしまいますのでローディング画像を表示するようにしました。

前記事：はてなブログの画像ポップアップをオリジナル画像に変える

Colorbox のオプション
力技でローディングイメージを表示する
実装サイト
お問い合わせ等

01Colorbox のオプション

まず、Colorbox でなにか方法はないかオプションを見てみましょう。

Colorbox – a jQuery lightbox

日本語の解説サイトもたくさんあるようですのでググってください。

オーバーレイ表示はデフォルトで、透明度は指定可能です。ローディングイメージのオプションはありませんのでデフォルトで表示されるようです。通常は画像がすぐに表示されますので見えません。

ただ、今回のケースは Colorbox に画像URL を渡す前に時間がかかるわけですからオプションではどうにもなりません。

onLoad という、今回は画像になりますが target content をロードする前に発生するコールバックのオプションがあり、何とかできそうにも思いますが、仮にそこで画像の存在チェックをやったとしてもその結果を Colorbox の href に入れる方法がないように思います。

02力技でローディングイメージを表示する

onLoad で可能かどうか試してみる前に、まずは力技でローディングイメージを表示するようコードを変更しました。

※自由に使っていただいて構いませんが、転載はしないでください。

window.addEventListener("DOMContentLoaded", () => {
    $(document).off("click","img.hatena-fotolife, img.magnifiable, img.http-image");
    $(document).on("click","img.hatena-fotolife", (e) => {
        const checkImage = (url) => {
            return new Promise((resolve) => {
                const originalUrl = url.replace(".jpg", "_original.jpg");
                const img = new Image();
                img.src = originalUrl;
                img.onload = () => resolve(originalUrl);
                img.onerror = () => resolve(url);
            });
        };
        // オリジナル画像存在チェックに時間がかかる場合があるためcolorboxのオーバーレイを表示
        const overlay = $('#cboxOverlay');
        overlay.css({'display':'block','opacity':'.9'});
        overlay.append('<div style="background: url(/images/loading.gif) no-repeat 50%; height: 100%;"></div>');


        const src = $(e.currentTarget).attr("src");
        checkImage(src).then(result => {
            overlay.empty();
            $(this).colorbox({maxWidth:"95%",maxHeight:"95%",transition:"none",photo:!0,href:result,title:" ",open:!0,opacity:.9});
        });
    });
    $("#cboxContent").on("click", () => $.colorbox.close());
});