Simplicityを少し改造してみた 番外編 part9 jQueryで画像が読み込めなかった時、代理の画像を表示する

例えばWordpressで言う所のjetpackプラグインで、photonを有効にしておくと画像をCDNによって素早く読み込めるようになります。CDNを利用することによってキャッシュサーバーに分散配置された画像を読み込むためサイトの速度改善になどに使われたりするわけですが、実際の所、そのキャッシュしているサーバーから画像が読み込めないとエラーになったりします。

本来あるはずの画像が読み込めないわけですから、速度が改善されたとしてもエラーが出ては意味がありません。
そこで、もし画像が読み込めなかった場合に代替用画像を読み込んで、何かしら表示しておくようにしたいなと思ったわけです。だってphotonって設定を有効化した直後とか結構エラー吐くんですもの(笑)

で、jQueryでそれをしようということなんですが、考え方自体はlazy-loadなどとあまり変わりません。何かしらの条件の時違う画像を表示しているわけですから。決定的に違うのは、画像が読み込めない時と言うのは、エラーだということです。

準備として、代替画像を作っておきます。何でも良いです。好きなサイズ、好きなデザインのものを用意して、今回は子テーマのimagesにアップロードしておきます(update対策)。

jQueryを書く

こんな感じになります。

image_dir_pathはだいたいSimplicityを利用している時は共通だと思います。ただ親テーマに適用する(親テーマのimagesに画像をアップロードする)場合は、「simplicity-child」の部分を「simplicity」に書き換えてください。
Wordpressの場合はだいたいこんな感じですけれども、一般的なサイトの場合は、画像ファイルが入っているディレクトリを指定します。

imageFileは、画像のファイル名です。

.error()は.bind(‘error’, handler)へのショートカットです。.bind()もそうですが、現在jQueryでは非推奨となっているので、動作はするかと思いますが、.error()を利用せずに書くとしたら、

こんな感じでしょうか。

!this.complete : 完了しなかった時、
typeof this.naturalWidth === “undefined” : 画像本来の幅がundefinedの時、
this.naturalWidth === 0 : 画像本来の幅が0の時、

imgのsrcを指定したものに書き変えます。どちらを利用するにしても意味合い的には同じようなことです。

今回のテーマとしては、画像が読み込めなかった時に、代替の画像を表示するというものですが自分のサーバーにある画像を読み込むということにおいて、あまり失敗はないと思うので文頭に書いたように、CDNなどを利用していたりして読み込めなかった場合がある時に対応する方法です。

特にphotonのエラーっぷりに辟易してる方はご利用いかがでしょうか?
まぁphotonを使わなければエラーも出ないんですけどね(笑)

もしかすると、photon由来のエラーによって、他のスクリプトが停止するというのは防げるかも知れません。
もしかするとですけれども。

スポンサーリンク

シェアする

フォローする