大規模なWebサイト、特に大規模なeコマースWebサイトなど、より多くの写真を備えた写真を閲覧します。最初の画面は最初の画面の外側にあることがわかります。写真は下にスクロールするときにロードされます。最初にすべての写真をロードする必要はありません。このようにして、Webを開く速度が大幅に向上します。以下は、著者が現在考えているアイデアです。あなたがより良いアイデアを持っているなら、私にあなたが私にいくつかのアドバイスを与えることを願っています。
実際、リアルタイムのロード写真のアイデアは非常に簡単です。ページがロードを開始すると、最初からロードする必要のない写真（2番目の画面の下の写真など、とにかく表示するためにスクロールする必要があります。<img src = "http：//ctc.qzonestyle.gtimg.cngg.cn/ac.cn/ac.gif" data-src = "http://y3.ifengimg.com/a/2014_37/03c4830691a6d8b.jpg"/>、src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif"カスタム属性 "http://y3.ifengimg.com/a/2014_37/03c4830691a6d8b.jpg"は画像のパスです。それまでスクロールするときは、データSRCの値をSRCの値に置き換えてから、Data-SRC属性を削除してください...
以下はデモです
< xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <タイトル> js画像の読み込みマージン：0;}。wp {width：1000px;マージン：5px Auto;パディング：10px 0;ボーダーボトム：1px solid #dedede;オーバーフロー：hidden;} ul li {display：block;幅：250px;フロート：左;マージン：5px 0;リストスタイル：なし;}。aimg {display：block;高さ：300px;最大幅：348px;国境：1px solid #eee;背景：url（http://ctc.qzs.qq.com/aoi/img/icenter/loading.gif）無修正センターセンター;} </style> </head> <body> <div> <a href = "http://www.cnblogs.com/xiaomou2014"> <img src = "http://pic.cnitblog.com/avatar/356740/20140716231521.png"> </a> <a href = "http://www.cnblogs.com/xiaomou2014"> http://www.cnblogs.com/xiaomou214 </a> cont2開始から始まる画像はリアルタイムでロードされます</div> <div> <h2> href = "http://news.ifeng.com/a/20140909/41906442_0.shtml#p = 1"ターゲット= "_ blank"> <img src = "http://e.hiphotos.baidu.com/image/w%3d310/sign = e0e3bb2e38292df597c3aa148c315ce2/c83d70cf3bc79f3d8cd8cd19a31b8a1cd11728b298b298bpg" /> </a> </li> <li> <img src = "http://h.hiphotos.baidu.com/image/w%3d310/sign=19bbb515ff1f1f4134e037037f151e95c1/b7fd5266d016092414414bdbd8aedd60735fae7cd343434414 /> < /li> <li> <img src = "http://g.hiphotos.baidu.com/image/w%3d310/sign = dbbeb83d4b540923aa69657fa258d1dc/b812c8fcc3cec3fdaa0ce16bd48d48d443f8794274274278994g /> </li> <li> <img src="http://c.hiphotos.baidu.com/image/w%3D310/sign=8e78cf5936a85edffa8cf822795409d8/bba1cd11728b47108b5b5bc5c1cec3fdfc032346.jpg" /> < /li> <li> <img src = "http://e.hiphotos.baidu.com/image/w%3d310/sign = 75538617DF54564EE565E23883DE/C2CEC3FDFC039245EEA8F5554A4A4A4C27D11E25FGFFGPGPB8585858858858885858888888888888888888888888888888888888888888884A4C27D11E25FG /> < /li> <li> <img src = "http://d.hiphotos.baidu.com/image/w%3d310/sign = 4e7eef2892ef76c6d0d2fd2ad2aad17fdf6/a9d3fd1f4134970a9bed222697cad1c8a78885d18d18d18 /> </li> <li> <img src = "http://a.hiphotos.baidu.com/image/w%3d310/sign = 22E5B431BC096B63811958513C328733/AC345982B2B7D0A22245777783C9C9EF76094B369A15.JPG /> < /li> <li> <img src = "http://g.hiphotos.baidu.com/image/w%3d310/sign = d76eb55fb333533faf5b6952f98d2fdca/ac6eddc451da81cbf76dbff9c50606d0101010101010101010823131131131131131131 /> < /li> <li> <img src = "http://f.hiphotos.baidu.com/image/w%3d310/sign = 7F41436EDBF9D72A1764161CE42A282A/ADAF2EDDA3CC7CD9E81D13883B013FB80E91A.JPG /> </li> <li> <img src = "http://b.hiphotos.baidu.com/image/w%3d310/sign = d1e3fa4567380cd7e61ea4ec9145ad14/ae51f3deb48f8f8c54f5733c00da38282525e1fe1fe1fe1fe1fe1fe1fe1fe1fe1fe1fe7 /> < /li> <li> <img src = "http://e.hiphotos.baidu.com/image/w%3d310/sign = 03C6A3C737FAE6CD0CB4AD603FB10F9E/B151F8198618367A4E5933D2D2C738BD4B21CE56A /> < /li> <li> <img src = "http://a.hiphotos.baidu.com/image/w%3d310/sign = 2C2009A6D01B0EF46CE89E5FEDC651A1/B219EBC4B74543A90AC4BB4441C178A82B80115E.JPG /> </a> </ul> </div> <div> <h2> cont2 </h2> <ul> <li> <a href = "http://news.ifeng.com/a/20140909/41906442_0.shtml#p = 1"ターゲット= " src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src = "http://y3.ifengimg.com/a/2014_37/03c4830691a6d8b.jpg"/> </a> href = "http://news.ifeng.com/a/20140909/41906442_0.shtml#p=1"ターゲット= "_ blank"> <img src = "http://ctc.qzonestyle.gtimg.cn/ac data-src = "http://y2.ifeng.com/a/2014_37/89ed5c7eff333333333333333333333333333333333333333333333337/a> </li> <li> <a href =" http://news.ifeng.com/a/20140909/41906442_0. "shtml#p = 1" > <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src = "http://y2.ifengimg.com/a/2014_37/d4dbca6004ab9b7.jpg" href = "http://news.ifeng.com/a/20140909/41906442_0.shtml#p=1"ターゲット= "_ blank"> <img src = "http://ctc.qzonestyle.gtimg.cn/ac data-src = "http://y3.ifengimg.com/a/2014_37/9349a4b2ee90309.jpg"/> </a> </li> <li> <a href = "http://news.ifeng.com/a/20140909/4190642_0.p.p.p.p.p.p.p.p.p.p.p.p.p.p.p.p.p. > <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src = "http://y2.ifengimg.com/a/2014_37/b2491836e230932.jpg src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src = "http://e.hiphotos.baidu.com/image/w%3d310/sign = 655bcf71d31373f0f53f6999e940f4b8b/86d6277777f9e2070889c207d0aeb4b4b8997.f297.f297.f297.f297.f297.f297. /> </li> <li> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src = "http://d.hiphotos.baidu.com/image/w%3d310/sign = 3629f39bad51f3dec3b2bf65a4eff0/94cad1c8a786c917d40169688CB3D70CF3BC75764. /> </li> <li> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src = "http://f.hiphotos.baidu.com/image/w%3d310/sign = 8c009502257f9e2f70351b092ff31e962/9922720e0cf3d7ca56401892f01fbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbe0963a99999999999999999999999999999999999999999999999998 /> </li> <li> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src = "http://a.hiphotos.baidu.com/image/w%3d310/sign = f62ff43b6ab773912c4268360c8198675/A1EC08FA513D26975959C2020D5657FBB2BB4316D83168 /> </li> <li> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src = "http://e.hiphotos.baidu.com/image/w%3d310/sign = 9ce0b545a918972ba33a06cbd6cc7b9d/a873912b31bb051b4ef3a /> </li> <li> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src = "http://a.hiphotos.baidu.com/image/w%3d310/sign = 9d833f1b950a304e522222222222222222222222222224AB18972BB49B4BD5E4CD7B89E510AE510A /> </li> <li> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src="http://a.hiphotos.baidu.com/image/w%3D310/sign=4a93da2a552c11dfded1b92253266255/d62a6059252dd42a007e1c62013b5bb5c8eab887.jpg" /> </li> </ul> </div> <div> <h2> cont3 </h2> <ul> <li> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src = "http://h.hiphotos.baidu.com/image/w%3d310/sign = 71556df3d2160924dc25a41ae406359b/f703738da977391274b38fc4fa198618377ae2777777777777777777777777777777777777 /> </li> <li> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src = "http://d.hiphotos.baidu.com/image/w%3d310/sign = 53e69395b8a1cd1105b674218913c8b0/ac4bd11373f08202f195e69a49fbfbfb641b0g /> </li> <li> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src = "http://h.hiphotos.baidu.com/image/w%3d310/sign = 3749C38A4334970A4773162EA5CBD1C0/53666D0160924AB1808880888088808890B /> </li> <li> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src = "http://e.hiphotos.baidu.com/image/w%3d310/sign = 8563bf575757fb2b2b2b2b2b342b55e137f4b2043/3b87e950352ac65cccb5d1799f9f9f22121193138pg /> </li> <li> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src = "http://f.hiphotos.baidu.com/image/w%3d310/sign = 74856B065E6034A829E2BE80FB1249D9/D000BAA1CD11728BAAB06E25CAFCC3C3FD2C1C.IMPG src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src = "http://c.hiphotos.baidu.com/image/w%3d310/sign = 49e22cda34d12fece05a8617fc2d5ff/cdbf6c81800a19d88e30c90831fa82a82828282828282828282828282828282828282828282828BBA8BBA618BBA8BBA618B.Jpg /> </li> <li> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src = "http://d.hiphotos.baidu.com/image/w%3d310/sign = 539b0d21347adab43dd01d42bbd5b36b/54fbb2ffb431666d22e4c8ab9d442309f3309f79052d278pg /> </li> <li> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src = "http://b.hiphotos.baidu.com/image/w%3d310/sign = 5077c2c2c2c1cec3fd8b3ea174e689d4b6/4afbfbedab64034f9195fd0888379310a551d67.jpg /> </li> <li> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src = "http://a.hiphotos.baidu.com/image/w%3d310/sign = 50bdad348418367aad8979dc1e728b68/3c6d55fbbb2fb2b43168dce1a. /> </li> <li> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src = "http://b.hiphotos.baidu.com/image/w%3d310/sign = f3ef9fa4e4e9c4b7453494b117ffd1e78/0bd162d9f22d3572ce865855551881813632763d0CC3BCC3BC. /> </li> <li> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src="http://a.hiphotos.baidu.com/image/w%3D310/sign=30a6338deb24b899de3c7f395e071d59/0b46f21fbe096b63eeba47dd0e338744eaf8ac9f.jpg" /> </li> <li> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src = "http://g.hiphotos.baidu.com/image/w%3d310/sign = 75a14ae060d9f2d3201122ee99ec8a53/500fd9f9d72a60592b78941b22a34349b033bbba42 /> </li> </ul> </div> <script> // IEペアと互換性のあるIEペアGetElementsByClassNameif（navigator.AppName == 'Microsoft Internet Explorer'）{document.getElementsByClassName = function（）{var ttagname = "*"; if（arguments.length> 1）{ttagname = arguments [1]; } if（arguments.length> 2）{var pobj = arguments [2]} else {var pobj = document; } var objarr = pobj.getelementsbytagname（ttagname）; var trobj = new Array（）; for（var i = 0; i <objarr.length; i ++）{if（objarr [i] .classname == arguments [0]）{trobj.push（objarr [i]）; }} trobjを返します。 }} //画像ロード関数loadimg（imgclass、imgsrc）{// data-src：ロードされる画像を保存するパスvar arrimg = document.getelementsbyclassname（imgclass）; //クラスのimgclassで画像配列をリアルタイムwindow.onscroll = function（）{for（var i = 0; i <arrimg.length; i ++）{if（！arrimg [i] .getattribute（imgsrc））継続します。 if（document.documentelement.scrolltop+document.body.scrolltop+document.documentelement.clientheight > arrimg [i] .offsettop）{arrimg [i] .setattribute（ "src"、arrimg [i] .getattribute（imgsrc））; arrimg [i] .removeattribute（imgsrc）;}}}}} loadimg（ "aimg"、 "）"）;たとえば、上記のデモのCont1の写真は、ページが読み込まれるとすぐに表示されます。ホームページのレイアウトは固定されています。これらの写真が2番目の画面の下にあることを確認できます。ただし、コンテンツページの場合、メインコンテンツコンテナ内の写真の場所は制御できません。これには、実際のページがロードされると、視覚範囲内にあるかどうかが決定される必要があります。視覚範囲内にある場合、ロードされます（もちろん、ホームページもこれを行うことができますが、インターネットの速度が非常に遅い場合、ホームページを開くときは、上から下にロードする代わりに、画像が表示される前にページアーキテクチャ全体がロードされるまで待つ必要があります）。画像は幅と高さの属性に設定する必要があります。これにより、ページ上の位置を占めることができます。そうしないと、ロードする前に透明なGIF画像のサイズのみを占めます。
次のデモがコンテンツページにいくつかの変更を加え、window.onloadとwindow.onscrollがすべてトリガーされると、ロードがトリガーされます。
< xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <タイトル> js画像の読み込みマージン：0;}。wp {width：1000px;マージン：5px Auto;パディング：10px 0;ボーダーボトム：1px solid #dedede;オーバーフロー：hidden;}。fl {width：700px;パディング：25px;フロート：左;ボーダー：1px solid #dedede; Line-Height：40px;オーバーフロー：hidden;}。fr {width：220px;高さ：800px;フロート：そうです; background-color：#dedede;}。aimg {display：block;最大幅：700px;マージン：0 Auto;背景：url（http://ctc.qzs.qq.com/aoi/img/icenter/loading.gif）無修正センターセンター;} </style> </head> <body> <div> <a href = "http://www.cnblogs.com/xiaomou2014"> <img src = "http://pic.cnitblog.com/avatar/356740/20140716231521.png"> </a> <a href = "http://www.cnblogs.com/xiaomou2014"> http://www.cnblogs.com/xiaomou214 </a> </div> <div>前</h2> <p> http://www.cnblogs.com/xiaomou2014 </p> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src = "http://b.hiphotos.baidu.com/image/w%3d310/sign = f3ef9fa4e4e9c4b7453494b117ffd1e78/0bd162d9f22d3572ce865855551881813632763d0CC3BCC3BC. /> <p>http://www.cnblogs.com/xiaomou2014</p> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src="http://a.hiphotos.baidu.com/image/w%3D310/sign=30a6338deb24b899de3c7f395e071d59/0b46f21fbe096b63eeba47dd0e338744eaf8ac9f.jpg" /> <p>http://www.cnblogs.com/xiaomou2014</p> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src = "http://g.hiphotos.baidu.com/image/w%3d310/sign = 75a14ae060d9f2d3201122ee99ec8a53/500fd9f9d72a60592b78941b2a34349b033bba42 7年前の切断を伴う高度ながんの少女</p> <a href = "http://news.ifeng.com/a/20140909/41906442_0.shtml#p=1"ターゲット= "_ blank"> <img src = "http://cttc.qzonthethle.g.g. data-src = "http://y3.ifengimg.com/a/2014_37/03c4830691a6d8b.jpg"/> </a> <p> 7年前に切断された進行がんの19歳の少女</p> <a href = "http://news.ifeng.com/a/20140909/41906442_0.shtml#p=1"ターゲット= "_ blank"> <img src = "http://ctc.qzonestyle.gtimg.cn/ac data-src = "http://y2.ifengimg.com/a/2014_37/89ed5c7eff3333333333333333333333333333333333333333333333333337 href = "http://news.ifeng.com/a/20140909/41906442_0.shtml#p=1"ターゲット= "_ blank"> <img src = "http://ctc.qzonestyle.gtimg.cn/ac data-src = "http://y2.ifengimg.com/a/2014_37/d4dbca6004ab9b7.jpg"/> </a> <p> 7年前に切断された進行がんの19歳の少女</p> <a href = "http://news.ifeng.com/a/20140909/41906442_0.shtml#p=1"ターゲット= "_ blank"> <img src = "http://ctc.qzonestyle.gtimg.cn/ac data-src = "http://y3.ifengimg.com/a/2014_37/9349a4b2ee90309.jpg"/> </a> <p> 7年前に切断された進行がんの19歳の少女</p> <a href = "http://news.ifeng.com/a/20140909/41906442_0.shtml#p=1"ターゲット= "_ blank"> <img src = "http://ctc.qzonestyle.gtimg.cn/ac data-src = "http://y2.ifengimg.com/a/2014_37/b2491836e230932.jpg"/> </a> </div> <div> </div> // IEペアと互換性があります。 {document.getElementsByClassName = function（）{var ttagname = "*"; if（arguments.length> 1）{ttagname = arguments [1]; } if（arguments.length> 2）{var pobj = arguments [2]} else {var pobj = document; } var objarr = pobj.getelementsbytagname（ttagname）; var trobj = new Array（）; for（var i = 0; i <objarr.length; i ++）{if（objarr [i] .classname == arguments [0]）{trobj.push（objarr [i]）; }} trobjを返します。 }} //画像の読み込み関数loadimg（imgclass、imgsrc）{// data-src：ロードする必要がある画像を保存するパス//クラスIMGCLASSクラスを備えた画像配列は、（var i = 0; i <arrimg.length; i ++）{if（！arrimg [i] .getattribute（imgsrc））継続するためにリアルタイムでロードする必要があります。 if（document.documentelement.scrolltop+document.body.scrolltop+document.documentelement.clientheight > arrimg [i] .offsettop）{arrimg [i] .setattribute（ "src"、arrimg [i] .getattribute（imgsrc））; arrimg [i] .removeattribute（imgsrc）;}}}}}} window.onload = window.onscroll = function（）{loadimg（ "aimg"、 "data-src"）} </script> </body> </html>