実装効果：スクロールバーが引き下げられると、画像は可視領域に表示され、読み込みを開始します
アイデア：
（1）IMGタグ、Lazy-SRCなど、設定したプロパティに実際の画像アドレスを配置します
（2）ページからIMGの高さを取得します（JQ、offset（）。トップ）、ネイティブ：
img.getBoundingClientRect（）。top + document.body.scrolltop || document.documentelement.scrolltop
（3）IMGが表示される場所が目に見える領域にあるかどうかを判断します。
ブラウザの目に見える領域では、justtop> scrolltop && offsettop <（scrolltop+windowheight）、JustTopは画像のオフセット+画像の高さです
コードコピーは次のとおりです。
//ドキュメントを変数に保存して、ドキュメントへのクエリを減らします
var doc = document;
for（var n = 0、i = this.oimg.length; n <i; n ++）{
//画像プレースホルダーの画像アドレスを取得します
var hsrc = this.oimg [n] .getattribute（this.sholder_src）;
if（hsrc）{
var scrolltop = doc.body.scrolltop || doc.documentelement.scrolltop、
windowheight = doc.documentelement.clientheight、
offsettop = this.oimg [n] .getBoundingClientRect（）。Top + Scrolltop、
imgheight = this.oimg [n] .clientheight、
JustTop = OffSettop + Imgheight;
//画像が可視領域にあるかどうかを判断します
if（justtop> scrolltop && offsettop <（scrolltop+windowheight））{
this.isload（hsrc、n）;
}
}
}
以下は詳細なコードです。
コードコピーは次のとおりです。
function lgy_imgscrolload（option）{
this.oimg = document.getElementById（option.wrapid）.getElementsByTagname（ 'img'）;
this.sholder_src = option.holder_src;
this.int（）;
}
LGY_IMGSCROLLLOAD.PROTOTYPE = {
loadimg：function（）{
//ドキュメントを変数に保存して、ドキュメントへのクエリを減らします
var doc = document;
for（var n = 0、i = this.oimg.length; n <i; n ++）{
//画像プレースホルダーの画像アドレスを取得します
var hsrc = this.oimg [n] .getattribute（this.sholder_src）;
if（hsrc）{
var scrolltop = doc.body.scrolltop || doc.documentelement.scrolltop、
windowheight = doc.documentelement.clientheight、
offsettop = this.oimg [n] .getBoundingClientRect（）。Top + Scrolltop、
imgheight = this.oimg [n] .clientheight、
JustTop = OffSettop + Imgheight;
//画像が可視領域にあるかどうかを判断します
if（justtop> scrolltop && offsettop <（scrolltop+windowheight））{
// alert（offsettop）;
this.isload（hsrc、n）;
}
}
}
}、
isload：function（src、n）{
var src = src、
n = n、
o_img = new Image（）、
_tat = this;
o_img.onload =（function（n）{
_that.oimg [n] .setattribute（ 'src'、src）;
_that.oimg [n] .removeattribute（_that.sholder_src）;
}）（n）;
o_img.src = src;
}、
int：function（）{
this.lowimg（）;
var _that =これ、
タイマー= null;
//スクロール：タイマーを追加して、頻繁に呼び出すことを防御します。
window.onscroll = function（）{
ClearTimeout（タイマー）;
Timer = setimeout（function（）{
_that.lowimg（）;
}、100）;
}
}
}
複製画像：
上記はこの記事に関するすべてです。実装効果は、jQueryプラグインの効果よりも悪くありません。コードはよりシンプルです。それを参照してください。