我々はすべて知っているように：フロントページ上の画像は、最も重要な最適化は、最も厄介な部分ですが、私も自分の満足度半分,,,まあ、長い話ああに最適化するために、数ヶ月の時間を過ごしたいです！
二つの方法であなたのイメージを最適化：事前にロードされたと遅延ロード
私たちは、についてお話しましょうプリロード：私は、プリロードされた上でブログを書いたが、それは,,,ありません後者は与えられた状況での動作を示すために、いくつかのコンテンツを見つけたので、コンテンツの多くは、私はとても幸せ。
プリロード一般的なシナリオは：開発プロセスでは、私たちはしばしば、マウスは、アップホバー背景メニューを変更するような要求を、遭遇します。何の絵があらかじめロードされていない場合は、それが点滅します。そして、あなたをさせませんデザイナーの1pxの目を持っています。なぜこのような状況はありますか？ホバー時間なので、絵が負荷になります。
今回は、（ホバー）をロードする（ただし、ページの読み込み時間が増加します終了する前に）プリロードを使用する必要があり、
次のような：
<script type="text/javascript">
<!--//--><![CDATA[//><!--
if (document.images) {
img1 = new Image();
img2 = new Image();
img3 = new Image();
img4 = new Image();
img1.src = "img/QQ图片20190521233736.jpg";
img2.src = "img/Cache_3fa28786e3750c51..jpg";
img3.src = "img/牌.png";
img4.src = "img/Cache_46072b3594a9a6b5..jpg";
}
//--><!]]>
</script>
そして、この：
var imgSrcArr=[
'要预加载的图片路径'(可以多个啊)
];
var imgWrap=[];
function preloadImg(arr) {
for(var i=0;i<arr.length;i++){
imgWrap[i]=new Image();
imgWrap[i].src=arr[i];
}
}
preloadImg(imgSrcArr);
$(function () {
preloadImg(imgSrcArr);
})
また、古典的なロード-前、下の3行は意味：テキストがロードされたり、画像を再ロードされるまで待ちます。
私は昔の血が噴出したので、私はなぜあなたに言わせれば？？？
事前にロードされた達成するためのAJAXの方法（オンライン参照、この方法では推奨されません）：
$(function(){
$.get('图片的路径');
})
/*
当然我们也可以写成一个函数，这里我就不演示了
*/
私達はちょうど開かれた環境要件ページの絵の遅延ロードの効果として、実際には、本当に良くない、シーンの多くをテストし、私は上記の言ったように見つけ、実際には、このような変換ホバー画像の読み込み（問題を解決するために、スプラッシュスクリーン）の後に、プリロードに適しています。そこで、我々は（それがはっきり、ちょうど行く必要はありませんを確認することです）マウスイベントに応答する必要がある場所にそれを置くことができます。
しかし、私の主な要件は、それを行う方法を、最初の画面イメージの最適化をロードし、ユーザーエクスペリエンスを向上させることですか？
私は助けることができない,,,のようにプリロード
よく考え、私は「避難する」ことを決めた遅延ロードの力を！
「遅延ロード」とは何ですか？
絵ではいくつかの理由に、これは現在、Jingdongモールと、この技術の使用上の他のサイトでは、ユーザーエクスペリエンスを向上させるための良い方法であることを示すために、プレースホルダと、表示されないため。
本質の遅延ロード：SRC上の実際の画像が所定の位置に「プレースホルダマップ」SRCを導入してはいけません！
なぜ遅延ロードを使用します。
ページでは、これらの20枚の写真は実際のSRCを設定している場合、ユーザは、スクロールバーのポイントは4つしか見ていないとき、20点の写真、100キロバイトにそれぞれがあると仮定し、その後、ときページが最初にロードされたときにブラウザがすぐにトラフィック2000キロバイトが必要、20画資源ことを要求します。
しかし、我々は、遅延ロードを行うだけで4点の写真、ブラウザの要求の流れを必要なだけ4写真のリソースを参照してくださいするようにユーザーに要求します唯一の400キロバイト これは、最初の画面の時間を大幅に短縮することができることを意味します。
コードは示しています。
index.htmlを
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<style>
body{
text-align: center;
}
.game-detail-logo{
width: 750px;
height: 430px;
text-align: center;
margin-top:30px;
}
</style>
<img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=4259389730,3152819071&fm=26&gp=0.jpg" class="game-detail-logo lazyLoadImg" picAddress="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=4003935283,4035293154&fm=27&gp=0.jpg">
<img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=4259389730,3152819071&fm=26&gp=0.jpg" class="game-detail-logo lazyLoadImg" picAddress="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1535003204948&di=7f297fc3bd01dcbca58f47c470ae9b9e&imgtype=0&src=http%3A%2F%2Fpic50.nipic.com%2Ffile%2F20141019%2F19104397_104929568000_2.jpg">
<img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=4259389730,3152819071&fm=26&gp=0.jpg" class="game-detail-logo lazyLoadImg" picAddress="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2390937513,1169699994&fm=27&gp=0.jpg">
<img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=4259389730,3152819071&fm=26&gp=0.jpg" class="game-detail-logo lazyLoadImg" picAddress="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6169699994&fm=27&gp=0.jpg">
<img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=4259389730,3152819071&fm=26&gp=0.jpg" class="game-detail-logo lazyLoadImg" picAddress="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3947968217,2342505746&fm=27&gp=0.jpg">
</body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> /*用http方式引入jQuery文件（min指压缩过的）*/
<script type="text/javascript" src="lazyLoadImg.js"></script>
</html>
上記のように、いくつかの写真では、我々はなります真の画像のsrcに入れ、中picAddress上の足跡図
JSで、ページのロードがそうならば、ユーザの視界内の画像かどうかを判断scrollTopスプライトによると、完了し、意志picAddress属性値は、（ビューに画像が、入力した場合、値はsrc属性に格納されているpicAddress特性をとられるかどうかを決定するスクロール繰り返しの場合に）src属性に出て格納されます。
lazyLoadImg.js
/*
* @example
* <img src="" class="lazyLoadImg" picAddress="">
* @param src里面写的是占位图或者说兜底图地址（一张默认填充图）
* @param class="lazyLoadImg" 是必须的标识
* @param picAddress里面写的是真正需要懒加载的图片地址
*/
const lazyLoadImg = {
initConfig() {
const self = this;
self.imgObject.srcFlag = 'picAddress'; // 图片地址
self.imgObject.class = 'lazyLoadImg'; // 惰性加载的图片需要添加的class
self.imgObject.sensitivity = 40; // 鼠标滚动敏感度，该值越小，惰性越强（加载越少）
self.imgObject.init();
},
imgObject: {
trigger() {
const self = this;
const eventType = (self.isPhone && 'touchend') || 'scroll';
self.imgListData = $('img.' + self.class + '');
$(window).trigger(eventType);
},
init() {
var self = this;
$(window).on('scroll', function() {
self.isLoadImg();
});
self.trigger();
},
isLoadImg() {
const self = this;
function loadNeedImg(img) { // 判断哪些img元素需要加载
const windowPageYOffset = window.pageYOffset; // 滚动条距离窗口顶部的偏移量
const offsetAddInner = window.pageYOffset + window.innerHeight; // window.innerHeight返回窗口的文档显示区的高度
const imgOffsetTop = img.offset().top; // 当前img元素距离窗口顶部的偏移量
return (
imgOffsetTop >= windowPageYOffset && // 确保img元素在窗口内
imgOffsetTop - self.sensitivity <= offsetAddInner //当前img元素是不是在窗口可见范围内，不可见返回:false
);
}
function loadImg(img, index) {
const imgUrl = img.attr(self.srcFlag);
const imgLazy = img.attr('src');
img.attr('src', imgUrl);
img[0].onload || // 开始向服务器请求加载图片
((img[0].onload = function() {
$(this)
.removeClass(self.class)
.removeAttr(self.srcFlag),
(self.imgListData[index] = null),
(this.onerror = this.onload = null);
}),
(img[0].onerror = function() {
(this.src = imgLazy),
$(this)
.removeClass(self.class)
.removeAttr(self.srcFlag),
(self.imgListData[index] = null),
(this.onerror = this.onload = null);
}));
}
self.imgListData.each(function(index, val) {
if (!val) return;
const img = $(val);
if (!loadNeedImg(img)) return;
const aa = img.attr(self.srcFlag);
if (!img.attr(self.srcFlag)) return;// 判断是否有规定的picAddress属性，没有则退出当次循环
loadImg(img, index);
});
},
},
};
lazyLoadImg.initConfig();
（そこに多くのオンライン.lazyloadパッケージjQueryのですが、個人的な使用感と互換性の影響が大きな違いであるため、パッケージ自身のJSを提唱し、ここで説明）
ここではパッケージを介して簡単に言及jQueryのコードは、（パッケージjQueryのは非常に単純な、最初に導入しました）：
<img src="imag/2.png" width="1920" height="340" alt="林允儿">
<!--有时为什么会有水平之间的空隙？回车符-->
<script>
$('img').lazyload({
//以“背景”的形式突出占位图
placeholder:'imag/loading.gif',
//视图滚动到这里时再加载原图
effect:'fadeIn',
//开始加载位置
threshold:-170
});
</script>
私たちは、より簡単に効果を見るミッドティアモバイルやローエンドの携帯電話に設定オンラインネットワークを高速化することができます！次のように：
アプリケーションシナリオの分析は、より完璧なウェブサイトを構築するための正しい方法を選択してください。
プロジェクト住所：南洋理工学院-優れたCコミュニティ