0

（A）次のように画像を設定するフレームワークを持つことの短所と長所は何かを知りたい：

var image = new Image("path", width, height);

幅と高さはハードコーディングされています。

私の 2 番目のアイデアは、(B) 画像が読み込まれた後に幅と高さを設定することでした。この場合、画像はレンダリング要求がある場合にのみ (サーバーに対して) 要求されます。画像が読み込まれると、そのメタデータに基づいて幅/高さが設​​定されます。このような：

var image = new Image("path");

    // somewhere into the renderer after the image has been loaded
    image.setWidth(width);
    image.setHeight(height);
4

1 に答える 1

0

ページの重量に関する限り、レスポンシブ画像を前者で責任を持って使用することができます. 同じページが 27 インチのモニターと iPhone で表示されているとします。

画面サイズを検出し、適切なサイズの画像をロードして、幅 320px の iPhone に 600kb のヒーロー画像をロードしないようにすることができます。代わりに、そのイメージの 15kb の赤ん坊の兄弟をロードできます。

2 番目の例では、サイズを把握するまでに既にイメージが読み込まれているため、より小さいバージョンのイメージを読み込むことで帯域幅を節約する機会が失われます。

また、この関数がソースの順序のどこにあるかによっては、読み込み後に画像のサイズを変更すると、おそらく再描画が発生する可能性があります。これは遅くて少し不自由です。

于 2013-04-22T22:38:05.073 に答える