Taobao画像処理ディスカッション
Taobaoのページは非常に大きいですが、非常に速く開きます。画像処理では、スクロールの読み込みが使用されます。これは、スクロール軸が転がる場所と写真がロードされる場所を意味します。ただし、ソースコードを確認したい場合は、コードの圧縮とマージがうまく行われるため、多くの努力が必要です。画像はスクロールにロードされ、初期化中に画像が読み込まれないため、ページの下部にあるページを更新すると、通常、ボトムページはロードされません。 Taobaoのアプローチは（操作に基づいてソースコードを見ていなかったため）、ページを上に戻すためにリフレッシュしているようです。
Taobaoを模倣し、写真を積み込んでロードします
考える3つの方法は次のとおりです。
1。JavaScript怠zyなロード視覚領域の読み込み
<！doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> haroomsフロントエンドブログ - ビジュアルエリアロードjavascript </title> <style> img {width：100％; margin-bottom：30px; Min-Height：400px;背景 - color：#ddd;} </style> </head> <body> <img haroomslazyload = "chrysanthemum.jpg" src = "" "> <img haroomslazyload =" desert.jpg "src =" ">"> <img haroomslazyload = "desert.jpg" src = ""> <img haroomslazyload = "Hydrangeas.jpg" src = ""> <img haroomslazyload = "koala.jpg" src = "" "> <img haroomslazyload =" lighthouse.jpg " haroomslazyload = "tulips.jpg" src = ""> <script> var imgnum = document.getelementsbytagname（ 'img'）。length; var imgobj = document.getElementsByTagname（ "IMG"）; var l = 0; window.onscroll = function（）{var seeheight = document.documentelement.clientheight; var scrolltop = document.documentelement.scrolltop || document.body.scrolltop; for（var i = l; i <imgnum; i ++）{if（imgobj [i] .offsettop <seeheight+scrolltop）{console.log（imgobj [i] .getattribute（ "src"））; console.log（imgobj [i] .src）; if（imgobj [i] .getattribute（ "src"）== ""）{imgobj [i] .src = imgobj [i] .getattribute（ "haoroomslazyload"）; }} if（imgobj [i] .offsettop> seeheight + scrolltop）{l = i;壊す; }}}} </script>2つのコンソール出力、Console.log（imgobj [i] .src）に注意してください。ブラウザアドレス全体を取得するには！
2。JQUERYLAZYロード視覚領域の読み込み
上記のJSはjQueryで翻訳されています！
var l = 0 // JSメソッド変換バージョン$（window）.bind（ "scroll"、function（event）{for（var i = l; i <$（ "img"）。length; i ++）{if（$（ "img"）。 if（ "img"）。eq（i）。 if（ "img"）。eq（i）.offset（）。3。視覚エリアの読み込み拡張
たとえば、アニメーション効果またはキャンバス画像、私が達成したい効果は、最初はロードされないことです。アニメーションまたはチャートにスクロールすると、ロードされます。次に、上記のコードに基づいて次の改善を行うことができます。
$（window）.bind（ "scroll"、function（event）{//ウィンドウの高さ +見えないトップの高さ=上部の画面の下部の高さvar thisbuttomtop = parseint（$（）.height（）） + parseint（$（window）.scrolltop（））; var ostop = parseint（）;上部の画面の上部varytop = parseint（$（windo）.offset（）。top）;ここでロード機能を実行すると、ロード機能が元のドキュメントから移動されます。上に戻ってリフレッシュします
視覚領域の読み込みを行うと、通常、上部にリフレッシュします。タオバオのように。上に戻ってリフレッシュします。
タオバオがどうやってやっているのかわかりません。最上部にリフレッシュして、OnBeForeUnloadイベントを使用しました。
onbeforeunloadおよびonunloadイベントは、更新または閉じたときにonunloadとonbeforeunloadの両方が呼び出されます。 window.onunloadまたは<body>を介して<script>スクリプトで指定できます。違いは、OnBeForeUnloadがOnunloadの前に実行され、Onunloadの実行を防ぐこともできることです。
onbeunloadは、ページが更新または閉じられているときにも呼び出されます。 onbeunloadは、新しいページを読み取るためにサーバーに移動しようとしているときに呼び出されますが、まだ読み始めていません。 Onunloadは、サーバーからロードする必要がある新しいページを読み取り、現在のページが近づいているときに呼び出されます。 Onunloadは、ページの更新や閉鎖を防ぐことはできません。そして、beforeunloadはそれを行うことができます。
1.ページがロードされたときにオンロードのみが実行されます
2。ページが閉じている場合は、最初にonbeforedloadを実行し、最後にsunloadを実行します
3.ページを更新するときは、最初にonbeforeunloadを実行し、次にsunloadを実行し、最後にonloadを実行します。
上に戻ってリフレッシュすることは、このイベントを使用することです。このように書くことができます。
window.onbeforeunload = function（）{$（window）.scrolltop（0）;}ウェブサイト上のすべての写真が使用されているが、エリアがロードされ、CSSとJSがマージされて圧縮されると、当社のウェブサイトの速度とパフォーマンスが大幅に改善されます！
Taobaoのようにやりたい場合は、コードを改善できます。
実際、読み込み遅延のアイデアは、最初に画像をデータSRCまたはプロパティに入れることです。ページが視覚領域にスライドするときは、保存された画像アドレスをSRCに割り当てます。
ここにはコードをリストしません。