画像置換のための新しいテクノロジー: ステートドメインメソッド

画像置換のための新しいテクノロジー: ステートドメインメソッド_JavaScript スキル

WBOY

リリース： 2016-05-16 18:35:40

オリジナル

1047 人が閲覧しました

Dave Shea の優れた要約、Paul Young は、既存のすべての方法の長所と短所を分析した後、新しい方法を提案し、それを「ステートドメインメソッド」(The StateMethod) と名付けました。この方法の原理については、記事で詳しく紹介します:

このメソッドは、追加の http リクエストが発生するため、サーバー上の画像をリクエストするのではなく、画像が無効になっているかどうかを確認します。著者は独創的なアプローチを編み出しました。

ほとんどのブラウザでは、Image オブジェクトをインスタンス化して無効な URL (http://0) まで追跡できるため、イメージのステータスを簡単に検出できます。無効にすると、onerror イベントが発生し、js ファイルの先頭に新しい画像オブジェクトが作成されます:

var img = new Image();

しかし、この方法と互換性のない奇妙なブラウザが 2 つあります。 Gecko ブラウザでは、画像が無効かどうかに関係ありません。 Onerror イベントは常にトリガーされます。幸いなことに、この問題を解決する別の実行可能な解決策があります。それは、無効な背景画像を html 要素に添付し、getComputedStyle メソッドを通じて style 属性を取得することです。画像が無効な場合、その属性は none または url(invalid-url:):

です。

if (img.style.MozBinding != null)
{
img.style.backgroundImage = "url(" document.location.protocol "//0)";
var bg = window .getComputedStyle(img,'').backgroundImage;

if (bg != "none" && bg !="url(invalid-url:)" || document.URL.substr(0, 2) == "fi")
{
document.enableStateScope("images-on", true)
}
} 

;

もう 1 つの困難なブラウザは Safari です。リクエストが無効な URL の場合、Safari のステータスバーにエラーメッセージが表示されますが、ページレイアウトにはまったく影響しません。ユーザーのステータスバーがオンになっている場合、エラーは継続しますが、これは非常に専門的ではありません。同様に、作成者は別の実現可能な解決策を検討しました。画像が 1*1 gif 画像からのものであり、データによってエンコードされている場合。画像が無効になっている場合、Safari でテストしたように、幅は 0 になります:

else
{
img.style.cssText ="-webkit-opacity:0";
if (img.style.webkitOpacity == 0)
{
img.onload = function()
{
document.enableStateScope("images-on", img.width > 0);
}
img.src =
"data:image/gif; Base64,"
"R0lGODlhAQABAIAAAP///wAAACH5BAE"
"AAAAALAAAAAABAAEAAAAICRAEAOw==";
}
} 

最後に、他のブラウザの場合は、Image オブジェクトの初期化を開始するときに、onerror トリガーイベントをテストするだけで済みます。

   else
   {
     img.onerror = function(e)
     {
      document.enableStateScope("images-on", true);
     }
     img.src = "about:blank";
   }

ステータス欄を切り替えることができます

ユーザーがテキストと代替画像を切り替えるシステムを作成することが可能です。

例を表示 (Paul Young によって提供されたサンプルファイル)

本文や他のサブ要素ではなくクラス属性が HTML に追加される主な理由は、画像を置き換える前に本文を完全にロードする必要があることです。 htmlの上に「image-on」が追加されていない場合。ステータスフィールドが有効になると、フラッシュが発生します。

画像置換テクノロジーは CSS の非常に重要な部分です。既存の画像置換技術の欠点を考慮して、著者は多くの時間を費やして新しいアプローチを見つけました。この方法は学ぶ価値があります。

サンプルのダウンロード: tate-scope-image-replacement.zip

原文翻訳: http://www.denisdeng.com/?p=235

英語原文: http://www.sitepoint.com/article/image-replacement-state-scope/