5

これが私の最初の質問ですので、間違いがあれば無視してください。

訪問者がサーフィンをしているデバイスに基づいて、訪問者に3つの代替レイアウトを提供しているという問題があります。

モバイル、タブレット、デスクトップ。

私のWebサイトはPHPであり、訪問者のブラウザー幅を決定するためにわずか280バイトのJavaScriptを使用しています。他のJavaScriptやjQuery、MooToolsのようなライブラリはありません。私は自分のサイトを非常に軽量に保ち、ページの読み込み速度を速くしたいと思っています。

PHP変数が呼び出され$layout、その値がJavaScriptによってブラウザーの幅に基づいて動的に割り当てられます。それに割り当てられた3つの値はmobile or tablet or desktop

これで、xhtmlに次のようなリンクがあります。

<img src="cdn/images/desktop/image1.jpg" width="500" height="200" alt="image1">
<img src="cdn/images/desktop/image2.jpg" width="500" height="200" alt="image2">
<img src="cdn/images/desktop/image3.jpg" width="500" height="200" alt="image3">

デフォルトでは、画像はcdn/images/desktopフォルダから読み込まれます。

私が探しているのは、値が$layoutであるtablet場合、画像はcdn/images/tabletフォルダからロードする必要があり、同様に、の評価者がで$layoutある場合、mobile画像はフォルダからロードする必要が ありcdn/images/mobileます。

画像の名前は同じままです。これらは、3つの異なるフォルダーにある3つの異なる解像度です。

可能であれば、PHPでこれを行うためのPHPソリューションを提案してください。

それ以外の場合は、プレーンなJavaScriptソリューションを提案してください（jQuery、MooToolsなどのライブラリはありません）

ありがとう

アップデート

実際、私はJoomlaをCMSとして使用しているため、投稿内でPHPコードを使用できないため、ページのレンダリング後またはレンダリング中にこれらのパスを変更する必要があります。

4

3 に答える 3

4 
$(function(){
        //mobile or tablet or desktop
        var client='<?php echo $layout; ?>'
        if(client=='desktop'){
            //do nothing
        }else if(client=='tablet'){
            $('#image-list img').each(function(){
                $('this').attr('src',$(this).attr('src').replace('desktop','tablet'));  
            });
        }else{
            //mobile
            $('#image-list img').each(function(){
                $('this').attr('src',$(this).attr('src').replace('desktop','mobile'));  
            });
        }
    });

        <div id="image-list">
        <img src="cdn/images/desktop/image1.jpg" width="500" height="200" alt="image1">
        <img src="cdn/images/desktop/image2.jpg" width="500" height="200" alt="image2">
        <img src="cdn/images/desktop/image3.jpg" width="500" height="200" alt="image3">
    </div>

jQueryを使用する

申し訳ありませんが、lib が必要ないことを知りませんでした。

    var client='<?php echo $layout; ?>'
    var list=document.getElementById('image-list');
    var img=list.getElementsByTagName('img');
    for(var i=0;i<img.length;i++){
        //img[i].src=img[i].src.replace('desktop',client);
        img[i].setAttribute('src',img[i].getAttribute('src-data').replace('desktop',client));
    }

ファイルの最後に入れます。

<img src-data="cdn/images/desktop/image1.jpg" width="500" height="200" alt="image1">
于 2012-05-06T14:26:15.577 に答える
1

これを試して：

<img src="cdn/images/<?php echo $layout; ?>image3.jpg" width="500" height="200" alt="image3">
于 2012-05-06T13:43:02.947 に答える
-3

簡単なJavaScriptを使用して画像のsrcを変更してみませんか？見栄えの良いスクリプトではないかもしれませんが、次のようなことができます。

xhtmlファイル：

<img id="image1" src="cdn/images/desktop/image1.jpg" width="500" height="200" alt="image1">
<img id="image2" src="cdn/images/desktop/image2.jpg" width="500" height="200" alt="image2">
<img id="image3" src="cdn/images/desktop/image3.jpg" width="500" height="200" alt="image3">

javascriptがどのレイアウトであるかを見つけたら、次のようにします。

document.getElementById("image1").src = "cdn/images/" + layout + "/image1.jpg";
document.getElementById("image2").src = "cdn/images/" + layout + "/image2.jpg";
document.getElementById("image3").src = "cdn/images/" + layout + "/image3.jpg";

それはあなたが何を意味するのですか？

于 2012-05-06T14:07:52.863 に答える