Jelajahi situs web besar, terutama gambar dengan lebih banyak gambar, seperti situs web e-commerce besar. Anda akan menemukan bahwa layar pertama berada di luar layar pertama. Gambar -gambar dimuat saat menggulir ke bawah. Tidak perlu memuat semua gambar di awal. Dengan cara ini, kecepatan membuka web sangat ditingkatkan. Berikut ini adalah ide -ide yang dipikirkan penulis saat ini. Jika Anda memiliki ide yang lebih baik, saya harap Anda akan memberi saya beberapa saran.
Faktanya, gagasan gambar pemuatan real-time sangat sederhana. Ketika halaman mulai memuat, gambar yang tidak perlu dimuat dari awal (seperti gambar di bawah layar kedua, Anda harus menggulir ke bawah untuk melihatnya. Lebih baik mengaturnya untuk memuat secara real-time saat menggulir ke bawah) ke properti khusus, seperti: <img src = "http://ctc.qzonle.gtimg.cryc.g.cnc.g.cg.gef.g.gtimg.c.g.gif.gif.g. data-src="http://y3.ifengimg.com/a/2014_37/03c4830691a6d8b.jpg" />, src="http://ctc.qzonestyle.gtimg.cn/ac/b.gif" is a transparent gif image of 1px*1px. Atribut khusus "http://y3.ifengimg.com/a/2014_37/03c4830691a6d8b.jpg" adalah jalur gambar. Saat menggulir ke bawah, ganti nilai dalam data-SRC dengan nilai SRC, dan kemudian hapus atribut data-SRC ...
Berikut ini adalah demo
<! Doctype html public "-// w3c // dtd xhtml 1.0 transisi // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"><html xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> JS loading di real time time </title> {style> {title> JS; margin: 0;}. wp {lebar: 1000px; Margin: 5px Auto; Padding: 10px 0; Border-Bottom: 1px solid #dedede; overflow: tersembunyi;} ul li {display: block; Lebar: 250px; float: kiri; Margin: 5px 0; List-style: none;}. AIMG {display: block; Tinggi: 300px; Max-Width: 348px; Perbatasan: 1px solid #eee; Latar Belakang: URL (http://ctc.qzs.qq.com/aoi/img/icenter/loading.gif) No-Repeat Center; src = "http://pic.cnitblog.com/avatar/356740/20140716231521.png"> </a> <a href = "http://www.cnblogs.com/xiaomou2014"> http://www.cnblogs.com/xiaomou2014 </a> cont2 gambar yang dimulai dengan awal dimuat secara real time </div> <v> <h2> cont1 </h2> </div> <v> <h2> cont1 </h2> </div> <v> <h2> cont1 </h2> </div> <v> <h2> cont1 </h2> </div> <v> <h2> cont1 </h2> </div> <v> <h2> cont1 </h2> </div> <v> <h2> cont1 </h2> href = "http://news.ifeng.com/a/20140909/41906442_0.shtml#p=1" target = "_ blank"> <img src = "http://e.hiphotos.baidu.com/image/w%3d310/sign=e0e3bb2e38292df597c3aa148c315ce2/c83d70cf3bc79f3d8cd19a31b8cf3bc79f3d8cd19a31b8cf3bc79 /> </a> </li> <li> <img src = "http://h.hiphotos.baidu.com/image/w%3d310/sign=19BBB515FF1F4134E037037F151E95C1/B7FD5266D016092414BD8AEDDD60734444444444444444444AFD5266 /> </li> <li> <img src = "http://g.hiphotos.baidu.com/image/w%3d310/sign=dbbeB83d4b540923a69657fa258d1dc/b812c8fcc3cec3fdaa0ce16bd4888888797777777777.jpcc3cec3fda0ce16BD48888 /> </li> <li> <img src = "http://c.hiphotos.baidu.com/image/w%3d310/sign=8e78cf5936a85edffa8cf822795409d8/bba1cd11728b47108b5b5bc5c5c1cc3c328b47108b5b5bc5c1c1cc328b47108b5b5bc5c1c1cd1cd128b4710 /> </li> <li> <img src = "http://e.hiphotos.baidu.com/image/w%3d310/sign=75538617df54564E565E23883DE9CDE/C2CEC3FDFC039245A8F5B0B0B8594.JADFC039245A8F5B0B0B85994.JADFC039245A8F5B0B0B85994.JA27C039245A8F5B0B81994.JE4A277C039245 /> </li> <li> <img src = "http://d.hiphotos.baidu.com/image/w%3d310/sign=4e7Eef2892EF76C6D0D2FD2AAD17FDF6/A9D3FD1F488970A9BED2D2D2697CAD1C8.JP8888870A9 /> </li> <li> <img src = "http://a.hiphotos.baidu.com/image/w%3d310/sign=22e5b431bc096b61111958513c328733/ac345982b7d0a2245777783c9ef3462b7d0a2245777783c9 /> </li> <li> <img src = "http://g.hiphotos.baidu.com/image/w%3d310/sign=d76eb55fb33533faf5b6952f98d2fdca/ac6eddc451da81cbf76dbf9c50c50666dc451da81cbf76dbf9c50c50666666666" "" /> </li> <li> <img src = "http://f.hiphotos.baidu.com/image/w%3d310/sign=7f41436edbf9d72a1764161ce42a282a/adaf2edda3c7cd9e81d138883b01213b0e.jp7cd9e81d138883B01213B013B0E3C7CD9E81 /> </li> <li> <img src = "http://b.hiphotos.baidu.com/image/w%3d310/sign=d1e3fa4567380cd7e61ea4ec9145ad14/ae51f3deb48f8c54f573c0da3829292e.jfa6c54f573c0da3829292e.jfa6 /> </li> <li> <img src = "http://e.hiphotos.baidu.com/image/w%3d310/sign=03c6a3c737fae6cd0cb4ad603fb10f9e/b151f818618367a4e593d2c7c7319818367a4e593d2c7c7c73818367a /> </li> <li> <img src = "http://a.hiphotos.baidu.com/image/w%3d310/sign=2c2009a6d01b0eF46ce89e5fedc651a1/b219ebc4b7443a90ac4bb4441c17882b7b7443a90ac4bbb4441c17882b7b7443a9a.m /> </a> </ul> </div> <div> <h2> cont2 </h2> <ul> <li> <a href = "http://news.ifeng.com/a/20140909/41906442_0.shtml#p=1" target = "_ _ _ _ _ _ _ src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src = "http://y3.ifengimg.com/a/2014_37/03c4830691a6d8b.jpg"/</a> </li> <a href = "http://news.ifeng.com/a/20140909/41906442_0.shtml#p=1" target = "_ blank"> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/ac" Data-src = "http://y2.ifeng.com/a/2014_37/89ed5c7eff33abf.jpg"/> </a> </li> <li> <a href = "http://news.ifeng.com/a/2014090909/41906442." " > <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src = "http://y2.ifengimg.com/a/2014_37/d4dbca6004ab9b7.jpg"/</a> </a> href = "http://news.ifeng.com/a/20140909/41906442_0.shtml#p=1" target = "_ blank"> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/ac" Data-src = "http://y3.ifengimg.com/a/2014_37/9349a4b2ee90309.jpg"/> </a> </li> <li> <a href = "http:/news.ifeng.com/a/2014090909/419/419." ><img src="http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src="http://y2.ifengimg.com/a/2014_37/b2491836e230932.jpg" /></a></li><li><img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" Data-src = "http://e.hiphotos.baidu.com/image/w%3d310/sign=655bcf71d31373f0f53f699e940f4b8b/86d627f9e2f07089c207d0eB2497F9E2F07089C207D07D079999 /> </li> <li> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" Data-src = "http://d.hiphotos.baidu.com/image/w%3d310/sign=3629f39bad51f3dec3b2bf65a4eff0ec/94cad1c8a78c917d4d4016968cb3d70.jp76c917d4d4016968cb3d70.bp76c917d4d40 /> </li> <li> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" Data-src = "http://f.hiphotos.baidu.com/image/w%3d310/sign=8c009502257f9e2f70351b092f31e962/992720e0cf3d7ca56401892f01f01f01f3d7ca56401892f01f01F016 /> </li> <li> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" Data-src = "http://a.hiphotos.baidu.com/image/w%3d310/sign=f62f43b6Ab773912c4268360c8198675/a1ec08fa513d2697559c20c20c20c20c20c20c20d5657fb467fa413d2697559c20c20c20c20c20d5657fb467fb46 /> </li> <li> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" Data-src = "http://e.hiphotos.baidu.com/image/w%3d310/sign=9Ce0b545a918972ba33a06cbd6cc7b9d/a8773912b31bb051b4ef3a79347Ab44444444447Ab31BB05179 /> </li> <li> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" Data-src = "http://a.hiphotos.baidu.com/image/w%3d310/sign=9d833f1b950a304e5222a6fbe1c9a7c3/d1160924Ab18972bb49b4bd5e4cd7b89972bbb49b4bd5e4cd7B89972BBBB49B4BD5E4CD7B89972BBBBB49 /> </li> <li> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" Data-src = "http://a.hiphotos.baidu.com/image/w%3d310/sign=4a93da2a552c11dfded1b92253266255/d62a605252dd42a007e1c62013b5b5b5b5c87cddd42a007e1c62013b5b5b5b5c8 /> </li> </ul> </div> <viv> <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/f703738da977391274b38fc4fc4fa.jfa2818da977391274b38fc4fc4fc4fc43281777391274b38fc4fc43 /> </li> <li> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" Data-src = "http://d.hiphotos.baidu.com/image/w%3d310/sign=53E69395B8A1CD1105B674218913C8B0/AC4BD11373F08202F195E69A49A49FBFBF1443 /> </li> <li> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" Data-src = "http://h.hiphotos.baidu.com/image/w%3d310/sign=3749c38a4334970a4773162ea5cbd1c0/536d0160924ab1808b1eaA9237Fae6c7a80 /> </li> <li> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" Data-src = "http://e.hiphotos.baidu.com/image/w%3d310/sign=8563bf5757fbb2fb342b5e137f4b2043/3b87e95035Ac65ccccb5d179f9f9f9f2b831115c65ccb5d179f9f9f9f2b831111 /> </li> <li> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" Data-src = "http://f.hiphotos.baidu.com/image/w%3d310/sign=74856b065e6034a829e2be80fb1249d9/d000baa1cd11728baaB06e25cafcc3c.JPD178BAAB06E25CAFCC3C3C3C.JPC.JPC.JPC.JPC.JABAAB06E25CAFCC31" /> </li> <li> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" Data-src = "http://c.hiphotos.baidu.com/image/w%3d310/sign=49e22cda34d12f2ece05a8617fc2d5ff/cdbf6c8100a19d88e30c90831f61800a19 /> </li> <li> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" Data-src = "http://d.hiphotos.baidu.com/image/w%3d310/sign=539b0d21347adab43dd01d42bbd5b36b/54fbb2fb43166d22e4c8Ab9d444230927828d2eD22E4C8AB9D442309 /> </li> <li> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" Data-src = "http://b.hiphotos.baidu.com/image/w%3d310/sign=5077c2c2c1cec3fd8b3ea174e689d4b6/4afbfbedab64034f9195fd08adc3793310371717f9195fd08adc379331037171719195fd08adc379333037171717191919 /> </li> <li> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" Data-src = "http://a.hiphotos.baidu.com/image/w%3d310/sign=50bdad348418367aad8979dc1e728b68/3c6d5fbb2fb43168dce1A67222222223082828282 /> </li> <li> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" Data-src = "http://b.hiphotos.baidu.com/image/w%3d310/sign=f3ef9fa4e9c4b7453494b117ffd1e78/0bd162d9f2d3572ce8658555188813636363636372 /> </li> <li> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" Data-src = "http://a.hiphotos.baidu.com/image/w%3d310/sign=30a6338deb24b899de3c7f395e071d59/0b46f21fbe096b63eEeEeEeEeEeEeEeEeEeEeEeEeEeEeEeEeEeEeEeEeEeEeEeEeEeEeEeEeEeEeEeEeEeEeEeEeEeE /> </li> <li> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" Data-src = "http://g.hiphotos.baidu.com/image/w%3d310/sign=75a14ae060d9f2d3201122ee99ec8a53/500fd9f9d72a60592b78941b2a3434349ba42b7b78941b2a34349 /> </li> </ul> </div> <script> // kompatibel dengan IE pair getElementsByClassNameif (navigator.appname == 'microsoft internet explorer') {document.geteLementsbyclassname = function () {var tagname = "*"; if (arguments.length> 1) {ttagname = argumen [1]; } if (arguments.length> 2) {var pobj = argumen [2]} else {var pobj = dokumen; } var objarr = pobj.getElementsByTagname (ttagname); var trobj = array baru (); untuk (var i = 0; i <objarr.length; i ++) {if (objarr [i] .className == argumen [0]) {trobj.push (objarr [i]); }} return trobj; }} // Fungsi pemuatan gambar LoadImg (imgclass, imgsrc) {// data-src: Path untuk menyimpan gambar yang akan dimuat var arrimg = document.getElementsbyclassName (imgclass); // Saya perlu memuat array gambar dengan kelas imgclass di window.onscroll = funch () {for (var i = 0; i <arrimg.length; i ++) {if (! Arrimg [i] .getAttribute (imgsrc)) lanjutkan; 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", "Data-SMisalnya, gambar dalam cont1 dalam demo di atas ditampilkan segera setelah halaman dimuat. Tata letak beranda sudah diperbaiki. Anda dapat mengonfirmasi bahwa gambar -gambar itu di bawah layar kedua. Namun, untuk halaman konten, lokasi gambar di wadah konten utama tidak terkendali. Ini mensyaratkan bahwa ketika halaman nyata dimuat, ditentukan apakah mereka berada dalam rentang visual. Jika berada dalam rentang visual, itu dimuat (tentu saja, beranda juga dapat melakukan ini, tetapi jika kecepatan internet sangat lambat, ketika membuka beranda, Anda harus menunggu sampai seluruh arsitektur halaman dimuat sebelum gambar ditampilkan, alih -alih memuatnya dari atas ke bawah). Gambar harus diatur ke atribut lebar dan tinggi, yang memungkinkannya untuk menempati posisi pada halaman, jika tidak, itu hanya akan menempati ukuran gambar GIF transparan sebelum dimuat.
Demo berikut telah membuat beberapa modifikasi pada halaman konten, dan pemuatan dipicu ketika window.onload dan window.onscroll semuanya dipicu.
<! Doctype html public "-// w3c // dtd xhtml 1.0 transisi // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"><html xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> JS loading di real time time </title> {style> {title> JS; margin: 0;}. wp {lebar: 1000px; Margin: 5px Auto; Padding: 10px 0; Border-Bottom: 1px solid #dedede; overflow: tersembunyi;}. fl {width: 700px; padding: 25px; float: kiri; Perbatasan: 1px solid #dedede; Line-Height: 40px; overflow: tersembunyi;}. fr {width: 220px; Tinggi: 800px; float: benar; latar belakang-warna: #dedede;}. Aimg {display: block; Max-Width: 700px; margin: 0 otomatis; Latar Belakang: URL (http://ctc.qzs.qq.com/aoi/img/icenter/loading.gif) No-Repeat Center; src = "http://pic.cnitblog.com/avatar/356740/20140716231521.png"> </a> <a href = "http://www.cnblogs.com/xiaomou2014"> http://www.cnblogs.com/xiaomou2014 </a> </div> <viv> <h2> Seorang gadis berusia 19 tahun dengan kanker lanjut yang telah mengamputasi 7 tahun lalu </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=f3ef9fa4e9c4b7453494b117ffd1e78/0bd162d9f2d3572ce8658555188813636363636372 /><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/0b46f21fbe096b63eEeEeEeEeEeEeEeEeEeEeEeEeEeEeEeEeEeEeEeEeEeEeEeEeEeEeEeEeEeEeEeEeEeEeEeEeEeE /><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/500fd9f9d72a60592b78941b2a343439b7b7b788941b2a343439b7b7b78941b2a343439b7b7b78941b2a3434349b7b7b78941b2a34349 Gadis kanker dengan amputasi 7 tahun yang lalu </p> <a href = "http://news.ifeng.com/a/20140909/41906442_0.shtml#p=1" target = "_ blank"> <img src = "http://ctc.qzonestye"> <img src = "http://ctc.qzonestye"> Data-src = "http://y3.ifengimg.com/a/2014_37/03c4830691a6d8b.jpg"/> </a> <p> Seorang gadis berusia 19 tahun dengan kanker lanjut yang telah diamputasi 7 tahun yang lalu </p> <a href = "http://news.ifeng.com/a/20140909/41906442_0.shtml#p=1" target = "_ blank"> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/ac" data-src = "http://y2.ifengimg.com/a/2014_37/89ed5c7eff33abf.jpg"/> </a> <p> Seorang gadis berusia 19 tahun dengan kanker lanjut yang telah mengamputasi 7 tahun yang lalu </p> <p> href = "http://news.ifeng.com/a/20140909/41906442_0.shtml#p=1" target = "_ blank"> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/ac" data-src = "http://y2.ifengimg.com/a/2014_37/d4dbca6004ab9b7.jpg"/> </a> <p> Seorang gadis berusia 19 tahun dengan kanker lanjut yang telah mengamputasi 7 tahun yang lalu </p> <p> href = "http://news.ifeng.com/a/20140909/41906442_0.shtml#p=1" target = "_ blank"> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/ac" Data-src = "http://y3.ifengimg.com/a/2014_37/9349a4b2ee90309.jpg"/> </a> <p> Seorang gadis berusia 19 tahun dengan kanker lanjut yang telah mengamputasi 7 tahun yang lalu </p> <p> href = "http://news.ifeng.com/a/20140909/41906442_0.shtml#p=1" target = "_ blank"> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/ac" Data-src = "http://y2.ifengimg.com/a/2014_37/b2491836e230932.jpg"/> </a> </div> <verv> </div> <script> // kompatibel dengan mikrosofon mikro ') </divetname = navigor.appnoMNOMNOME') = function () {var tTagname = "*"; if (arguments.length> 1) {ttagname = argumen [1]; } if (arguments.length> 2) {var pobj = argumen [2]} else {var pobj = dokumen; } var objarr = pobj.getElementsByTagname (ttagname); var trobj = array baru (); untuk (var i = 0; i <objarr.length; i ++) {if (objarr [i] .className == argumen [0]) {trobj.push (objarr [i]); }} return trobj; }} // Fungsi pemuatan gambar LoadImg (imgclass, imgsrc) {// data-src: Path untuk menyimpan gambar yang perlu dimuat var arrimg = document.geteLementsByClasSname (imgclass); // Array gambar dengan kelas kelas imgclass perlu dimuat secara real time untuk (var i = 0; i <arrimg.length; i ++) {if (! Arrimg [i] .getAttribute (imgsrc)) lanjutkan; 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>