JavaScript を使用して画像のスケーリングと最適化を解決する code_image 特殊効果

クライアントから、構築したばかりの Web サイトが正しく表示されないと連絡を受けました。これが私にとって初めての独立したプロジェクトだったので、すぐに不安になり、すぐに Web サイトを開いて見ました。異常なものは来てください。どうして異常なのかと再度尋ねると、引き継ぎ時の効果とは違うとのことでした。ははは、引き継ぎ時に異常だったら絶対に引き継がないほうがいいですよ。スクリーンショットを撮ります。案の定、それは彼がアップロードしたばかりの写真で、コンテンツを表示するウィンドウが開きました。コードを見ると明らかに max-width が記述されているのに、なぜこのような状況が発生するのでしょうか。突然、彼が送ってきた写真のブラウザが古代の神聖な IE6 のように不快なものであることに気づきました。確認すると確かにそうだった、またそうだった！本当に怠慢で、IE6でのテストもせずにそのまま引き渡してしまいました。

IE6 について言えば、フロントエンドの仕事をしている私たちにとっては、多くの属性がサポートされていないため、本当にイライラしており、無力です。しかし、今でも多くのユーザーが使用しており、無視することはできません。互換性を保つために、同僚にアドバイスを求め、IE6 用の画像を表示するために js スケーリングを使用し、いくつかの詳細な最適化を行いました。

今日のクライアントの Web サイトは比較的小規模であり、Web サイトのパフォーマンスに対する高い要件はありませんが、これらのことは長期的な学習プロセスであると考えており、いくつかの記事を確認しました。 img タグの onload メソッドを使用してサイズを変更する関数を呼び出す場合、-expression の動作は推奨されないようです (後で引き続き検証します)。ページがロードされるとトリガーされます。

コードをコピー コードは次のとおりです。

function raiseImage(img,width){
var image=new Image();
image.src=img.src;
var temp = temp = (temp>width)?width:temp;
img.style.display = "インライン";
}
function doResize(){
if($.browser.version==6&&$.browser.msie) $("img") .each( function(){resizeImage(this,100)});
}
window.onload = doResize;

このコードは、image を決定して変更します。原理は比較的単純ですが、このコードの前に、CSS に画像のサイズを決定させるための判断要素も追加しました。コード内で画像の高さと幅を定義していないため、スケーリングするときは、js に等比率スケーリングを実行させるのではなく、一方の値を変更するだけで済み、もう一方の値を適応させる必要があります。ちょっとした最適化。コード内で Jquery を引用しました（慣れているため）このように書く必要はありません。DOM 要素が返された後、関数を均一に処理できるためです。お客様が外部リンクの画像を使用することが多いことを考慮し、現時点ではWebページの表示速度が画像ソースに影響を受けるため、ページが読み込まれるときに、まずCSSを使用して表示する必要のある画像を非表示にし、画像を拡大縮小した後、js メソッドを使用して、画像を表示するために、IE6 用に別のハックを作成しました。

コードをコピーします コードは次のとおりです。 >