WordPress と phpBB を使用してサイトを開発しています。これらの CMS によって画像パスが生成されることに注意してください。私が欲しいのは..............ブラウザーに送信する前に出力を保持することです..............デバイスの種類に応じて画像パスを変更し、最終的に正しい画像を出力します。
パスを置き換える必要があるのはなぜですか?
私の NORMAL 画像は 180KB、MEDIUM 画像は 90KB、SMALL 画像は 30KB で、このように各ページに約 20 枚の画像があり、小さくて遅いデバイス用に小さい画像に置き換えることで削減できるページ速度を想像してみてください. また、画像は小さなデバイスの重要な部分のみを強調するためにトリミングされているため、寸法を変更しても問題は解決しません。
CSS3 メディア クエリを使用しない特定の理由があるため、CSS3 メディア クエリも探していません。
私にとって何がうまくいくでしょうか?
私の優先事項はページの読み込み時間を最小限に抑えることなので、テンプレートで JavaScript ライブラリを使用していないため、正規表現を使用するのが最善の解決策です。
これが JavaScript なしでは達成できない場合は、ライブラリを使用せずに単純な古い JavaScript メソッドを使用することをお勧めします。これは、テンプレート内の唯一の JavaScript 関数であり、ライブラリ全体をロードする意味がないからです。
以下は、私がアプローチすべきものでした。しかし、私はそれを取得する方法がわかりません。親切に助けてください。
注意してください:-私は PHP が初めてで、正規表現と JavaScript もゼロです。そのため、もう少し詳しく説明してください。
<?php ob_start (); ?> /* Start Buffering */
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pellentesque vestibulum fringilla. Nullam eget fermentum neque. Quisque ullamcorper fringilla quam, eu elementum nisl ornare vitae.</p>
<img src="images/desktop/pic1.jpg"/>
<img src="images/desktop/pic2.jpg"/>
<img src="images/desktop/pic3.jpg"/>
</div>
<?php ob_get_contents(); /* Get the Buffer */
if ($layout = 'mobile') {
/* replace <img src="images/desktop/pic1.jpg"/> with <img src="images/mobile/pic1.jpg"/>
/* replace <img src="images/desktop/pic2.jpg"/> with <img src="images/mobile/pic2.jpg"/>
/* replace <img src="images/desktop/pic3.jpg"/> with <img src="images/mobile/pic3.jpg"/>
The Folder-Name 'desktop' should be replaced by 'mobile'
*/
} else if ($layout = 'tablet') {
/* replace <img src="images/desktop/pic1.jpg"/> with <img src="images/tablet/pic1.jpg"/>
/* replace <img src="images/desktop/pic2.jpg"/> with <img src="images/tablet/pic2.jpg"/>
/* replace <img src="images/desktop/pic3.jpg"/> with <img src="images/tablet/pic3.jpg"/>
The Folder-Name 'desktop' should be replaced by 'tablet'
*/
}
ob_end_flush (); /* Send Output to the browser */
?>
$layout の値は、別の PHP 関数によって計算されています。
それがより良いアプローチだと思われる場合も、まったく異なる解決策を提案してください。