1

だから私が持っているのは次のHTML構造です

<div class="large">
<a href="http://www.google.com">
<img src="/wp-content/themes/firstone/mythumb.php?src=http://www.example.com/test.jpg&h=600&w=800&zc=1&s=1" width="800" height="600" border="0" /></a>
</div>

mythumb.php は、あらかじめ定義されたサイズ制限 (この場合は 800x600) でサムネイルをオンザフライで作成するサムネイル作成スクリプトです。

ただし、CSSファイルで設定しました

.large img
{
width:400px;
height:300px;
}

これは、iPhone/iPad などで網膜効果を実現するために行われます。

ただし、これは動的に実行する方がよいと考えていたので、CSS で定義された幅と高さを取得して、URL でそれらの値を置き換えられるようにしたいと考えていました。

この場合、javascript を変更することは可能でしょうか?

/wp-content/themes/firstone/mythumb.php?src=http://www.example.com/test.jpg&h=600&w=800&zc=1&s=1

に

/wp-content/themes/firstone/mythumb.php?src=http://www.example.com/test.jpg* &h=300&w=400* &zc=1&s=1

この変更は、画像が読み込まれる前に行う必要があるため、同じ画像を 2 回ダウンロードしてユーザーの帯域幅を浪費することはありません。

また、これを mythumb.php から呼び出される画像にのみ適用し、ページ上の他の静的画像には適用したくありません

このようなことが可能だと思う人はいますか？

4

3 に答える 3

1

HTML レイアウトでは img タグを使用しますが、src 属性は省略します

<img id="test" class="variableRes" />
<img id="test1" class="variableRes"/>

js で、画像パスの配列を設定します。

myImages = {
    test: "/wp-content/themes/firstone/mythumb.php?src=http://www.example.com/test.jpg",
    test1: "/wp-content/themes/firstone/mythumb.php?src=http://www.example.com/test1.jpg"
}

CSS は img のサイズを決定するため、img スタイルを照会し、URL を作成し、src を img タグに割り当てることができます。

$('.variableRes').each(function(){
    var $el = $(this);
    var id = $el.attr("id");
    var height = $el.css("height").substr(0,-2);//strip "px"
    var width = $el.css("width").substr(0,-2);
    $el.attr("src", myImages[id] + "&h="+ height +"&w="+ width+"&zc=1&s=1");
})
于 2012-12-17T21:02:10.603 に答える
0

画像に src がある場合、画像の読み込みを防ぐことはできません。「data-src」のような別の属性に変更できます

<img data-src="/wp-content/themes/firstone/mythumb.php?src=http://www.example.com/test.jpg&h=600&w=800&zc=1&s=1" width="800" height="600" border="0" />

次に、次のようにそれらを繰り返すことができます: (ただし、多くの img がある場合はお勧めしません)

var imgs = document.getElementsByTagName('img');​​
for (var i = 0; i < imgs.length; i++) {
    if (notRetina) {
        imgs[i].src = imgs[i].getAttribute('data-src')
        .replace('h=600', 'h=300')
        .replace('w=800', 'h=400');
    }
}

おそらく、必要な値を配置するために置換よりもうまくいく可能性があります（data-src属性に配置しないなど）。

于 2012-12-17T21:06:20.560 に答える
0

サーバー上の HTML ソースに画像の src を設定すると、ほとんどの場合、ブラウザが画像を 2 回フェッチすることになります。次の 2 つのことを行うことができます。

  1. JavaScript を使用して src を設定し、最初にプレースホルダーを指すようにします。
  2. タグのスタイルをインラインに設定します。

画像のサイズが毎回異なる場合は、簡単で高速なため、2 番目のオプションを選択します。

それで：

<div style="width: 800px; height: 600px">
  <a href="http://www.google.com">
  <img src="/wp-content/themes/firstone/mythumb.php src=http://www.example.com/test.jpg&h=600&w=800&zc=1&s=1" width="800" height="600" border="0" /></a>
</div>

800 と 600 の値は、php を使用して設定されます。

ただし、「大きい」場合にサイズが常に同じである場合は、前述の JavaScript アプローチを使用できます。幅と高さの定義を持つ CSS が非同期でフェッチされるため、少し遅くなります。CSS の幅と高さの定義があることを確認するには、domready イベントの代わりに document.onload イベントを待つ必要があります。次に、JavaScript を使用して div の幅と高さを取得し、画像の src を作成できます。オンロードには時間がかかる可能性があるため (特に、ソーシャル メディア ボタンなどの潜在的に低速な外部コンテンツがある場合)、サーバーからすべてがプルされるまで、画像は表示されません。

私はphpの大きなサーバー変数を作成し、それをどこでも使用します。これは間違いなく最速であり、サイズの定義はまだ 1 か所にあります。

于 2012-12-17T21:07:37.940 に答える