เรียกดูเว็บไซต์ขนาดใหญ่โดยเฉพาะรูปภาพที่มีรูปภาพเพิ่มเติมเช่นเว็บไซต์อีคอมเมิร์ซขนาดใหญ่ คุณจะพบว่าหน้าจอแรกอยู่นอกหน้าจอแรก รูปภาพจะถูกโหลดเมื่อเลื่อนลง ไม่จำเป็นต้องโหลดรูปภาพทั้งหมดในตอนแรก ด้วยวิธีนี้ความเร็วในการเปิดเว็บได้รับการปรับปรุงอย่างมาก ต่อไปนี้เป็นแนวคิดที่ผู้เขียนคิดในปัจจุบัน หากคุณมีความคิดที่ดีกว่าฉันหวังว่าคุณจะให้คำแนะนำกับฉัน
ในความเป็นจริงความคิดในการโหลดภาพเรียลไทม์นั้นง่ายมาก เมื่อหน้าเริ่มโหลดรูปภาพที่ไม่จำเป็นต้องโหลดตั้งแต่ต้น (เช่นรูปภาพด้านล่างหน้าจอที่สองคุณต้องเลื่อนลงเพื่อดูพวกเขาต่อไปมันจะดีกว่าที่จะตั้งค่าให้โหลดในแบบเรียลไทม์เมื่อเลื่อนลง) ไปยังคุณสมบัติที่กำหนดเองเช่น: <img src = "http://ctc.qzonesty 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" เป็นเส้นทางของภาพ เมื่อเลื่อนลงไปที่มันให้แทนที่ค่าใน Data-SRC ด้วยค่าของ SRC จากนั้นลบแอตทริบิวต์ Data-SRC ...
ต่อไปนี้คือการสาธิต
<! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-ype" content = "ข้อความ/html; charset = utf-8"/> <title> มาร์จิ้น: 0;}. wp {width: 1000px; มาร์จิ้น: 5px auto; Padding: 10px 0; ขอบด้านล่าง: 1px Solid #Dedede; ล้น: ซ่อน;} 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/xiaMou2014"> src = "http://pic.cnitblog.com/avatar/356740/20140716231521.png"> </a> <a href = "http://www.cnblogs.com/xiaomou2014"> http://www.cnblogs.com/xiaomou2014 </a> cont2 ภาพที่เริ่มต้นด้วยการเริ่มต้นถูกโหลดแบบเรียลไทม์ 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/c83d70cf3bc79f3d8cd8cd19a31b81b83d70cf3bcd12 /> </a> </li> <li> <img src = "http://h.hiphotos.baidu.com/image/w%3d310/sign=19bbb515ff1f4134e037037f151e95c1/b7fd5266d016092414bd8aeddd60707cd35 /> </li> <li> <img src = "http://g.hiphotos.baidu.com/image/w%3d310/sign=dbbeb83d4b540923aa69657fa258d1dc/b812c8fcc3cec3fdaa0ce /> </li> <li> <img src = "http://c.hiphotos.baidu.com/image/W%3D310/SIGN=8E78CF5936A85EDFFA8CF822795409D8/BBA1CD11728B47108B5BC5C5CCEC3FDC3FCCEC3FCCEC3 /> </li> <li> <img src = "http://e.hiphotos.baidu.com/image/w%3d310/sign=75538617df54564ee565e23883de9cde/c2cec3fdfc039245ea8f5b0b8559444 /> </li> <li> <img src = "http://d.hiphotos.baidu.com/image/w%3d310/sign=4e7eef2892ef76c6d0d2fd2aad17fdf6/a9d3fd1f4134970a9d2d2697cad1c8 /> </li> <li> <img src = "http://a.hiphotos.baidu.com/image/w%3d310/sign=22E5B431BC096B63811958513C328733/AC345982B2B7D0A224577777783C960945B2 /> </li> <li> <img src = "http://g.hiphotos.baidu.com/image/w%3d310/sign=D76EB55FB33533FAF5B6952F98D2FDCA/AC6EDDC451DA81CBF76DBF9C506D001602445245245245 /> </li> <li> <img src = "http://f.hiphotos.baidu.com/image/w%3d310/sign=7f41436edbf9d72a1764161ce42a282a/adaf2edda3cc7cd9e81d13883b012121212 /> </li> <li> <img src = "http://b.hiphotos.baidu.com/image/w%3d310/sign=d1e3fa4567380CD7E61EA4EC9145AD14/AE51F3DB48F8C54F573C0DA38292DF5DF5DF5 /> </li> <li> <img src = "http://e.hiphotos.baidu.com/image/w%3d310/sign=03c6a3c737fae6cd0cb4ad603fb10f9e/b151f8198618367a4e593d2c738883 /> </li> <li> <img src = "http://a.hiphotos.baidu.com/image/w%3d310/sign=2C2009A6D01B0EF46CE89E5FEDC651A1/B219EBC4B74543A90AC4441C178214 /> </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"/> href = "http://news.ifeng.com/a/20140909/41906442_0.shtml#p=1" target = "_ blank"> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/ac/b.gif" data-src = "http://y2.ifeng.com/a/2014_37/89ed5c7eff33abf.jpg"/> </a> </li> <li> <a href = "http://news.ifen.com/a/201409/419064424242424242424 > <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src = "http://y2.ifengimg.com/a/2014_37/d4dbca6004ab9b7.jpg"/> </a> href = "http://news.ifeng.com/a/20140909/41906442_0.shtml#p=1" target = "_ blank"> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/ac/b.gif" data-src = "http://y3.ifengimg.com/a/2014_37/9349a4b2ee90309.jpg"/> </a> </li> <li> <a href = "http://news.ifenk.com/a/2014090909/4190642 > <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src = "http://y2.ifengimg.com/a/2014_37/b2491836e230932.jpg"/> </a> src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src = "http://e.hiphotos.baidu.com/image/w%3d310/sign=655bcf71d31373f0f53f699e940f4b8b/86d6277F9E2F07089C207D07D07D07D07089 /> </li> <li> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src = "http://d.hiphotos.baidu.com/image/w%3d310/sign=3629f39bad51f3dec3b2bf65a4eff0ec/94cad1c8a786c917d4016968 /> </li> <li> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src = "http://f.hiphotos.baidu.com/image/w%3d310/sign=8c009502257f9e2f70351b092f31e962/9922720e0cf3d7ca56401892f01fb01fb0 /> </li> <li> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src = "http://a.hiphotos.baidu.com/image/w%3d310/sign=f62f43b6ab773912C4268360C8198675/A1EC08FA513D269759C20D5657FB2FB2FB43 /> </li> <li> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src = "http://e.hiphotos.baidu.com/image/w%3d310/sign=9ce0b545a918972ba33a06cbd6cc7b9d/a8773912b31bb051b4ef3af3a793 /> </li> <li> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src = "http://a.hiphotos.baidu.com/image/w%3d310/sign=9d833f1b950a304e52222a6fbe1c9a7c3/d1160924ab18972bb49b4b49b49b49b49b49b49b49b49b49b49b4 /> </li> <li> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src = "http://a.hiphotos.baidu.com/image/w%3d310/sign=4a93da2a552c11dfded1b92253266255/d62a6059252d42a007e1c62013b5b579 /> </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/f703738da977391274b38fc4fc4fc4fc4fc4fc4fc4fc4fc /> </li> <li> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src = "http://d.hiphotos.baidu.com/image/w%3d310/sign=53e69395b8a1cd1105b674218913c8b0/ac4bd11373f08202f195e69a49fb64fb64 /> </li> <li> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src="http://h.hiphotos.baidu.com/image/w%3D310/sign=3749c38a4334970a4773162ea5cbd1c0/5366d0160924ab1808b1ea9237fae6cd7a890beb.jpg" /> </li> <li> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src = "http://e.hiphotos.baidu.com/image/w%3d310/sign=8563bf5757fbb2fb342b5e137f4b2043/3b87e950352ac65ccccb5d179f9f2b2b213 /> </li> <li> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src = "http://f.hiphotos.baidu.com/image/w%3d310/sign=74856B065E6034A829E2BE80FB1249D9/D000BAA1CD11728BAAB06E25CAFCC3C3C3 /> </li> <li> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src = "http://c.hiphotos.baidu.com/image/w%3d310/sign=49e22cda34d12f2ece05a8617fc2d5ff/cdbf6c81800a19d88e30 /> </li> <li> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src = "http://d.hiphotos.baidu.com/image/w%3d310/sign=539b0d21347adab43dd01d42bbd5b36b/54fbb2fb4316666d22e4c8ab9d442209053053053053 /> </li> <li> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src = "http://b.hiphotos.baidu.com/image/w%3d310/sign=5077c2c2c1cec3fd8b3ea174e689d4b6/4afbfbedab64034F9195FD08ADC379310A550 /> </li> <li> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src = "http://a.hiphotos.baidu.com/image/w%3d310/sign=50bdad348418367aad8979dc1e728b68/3c6d55fbb2fb43168dce1a672222 /> </li> <li> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src = "http://b.hiphotos.baidu.com/image/w%3d310/sign=f3ef9fa4e9c4b7453494b117ffd1e78/0bd162d9f2d3572ce86585518881863 /> </li> <li> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src = "http://a.hiphotos.baidu.com/image/w%3d310/sign=30a6338deb24b899de3c7f395e071d59/0b46f21fbe096b63eeba47dd0e338743 /> </li> <li> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src = "http://g.hiphotos.baidu.com/image/w%3d310/sign=75a14ae060d9f2d3201122ee99ec8a53/500fd9f9d72a60592b789441b2a3434343434343434 /> </li></ul> </div> <script> // เข้ากันได้กับ IE Pair GetElementsByClassNameif (Navigator.AppName == 'Microsoft Internet Explorer') {document.getElementByClassName = function () {var ttagname = "*"; if (arguments.length> 1) {ttagname = อาร์กิวเมนต์ [1]; } if (arguments.length> 2) {var pobj = อาร์กิวเมนต์ [2]} else {var pobj = เอกสาร; } var objarr = pobj.getElementsByTagname (ttagname); var trobj = new Array (); สำหรับ (var i = 0; i <objarr.length; i ++) {ถ้า (objarr [i] .classname == อาร์กิวเมนต์ [0]) {trobj.push (objarr [i]); }} return trobj; }} // ฟังก์ชั่นโหลดภาพ loadimg (imgclass, imgsrc) {// data-src: เส้นทางที่จะจัดเก็บภาพที่จะโหลด var arrimg = document.getElementsByClassName (imgClass); // ฉันต้องโหลดอาร์เรย์รูปภาพด้วยคลาส imgclass ในหน้าต่างเรียลไทม์. onscroll = function () {สำหรับ (var i = 0; i <arrimg.length; i ++) {ถ้า (! 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]ตัวอย่างเช่นรูปภาพใน Cont1 ในการสาธิตด้านบนจะปรากฏขึ้นทันทีที่โหลดหน้าเว็บ รูปแบบของหน้าแรกได้รับการแก้ไข คุณสามารถยืนยันได้ว่ารูปภาพเหล่านั้นอยู่ด้านล่างหน้าจอที่สอง อย่างไรก็ตามสำหรับหน้าเนื้อหาที่ตั้งของรูปภาพในคอนเทนเนอร์เนื้อหาหลักนั้นไม่สามารถควบคุมได้ สิ่งนี้ต้องการว่าเมื่อโหลดหน้าจริงจะถูกกำหนดว่าจะอยู่ในช่วงการมองเห็นหรือไม่ หากอยู่ในช่วงการมองเห็นมันจะถูกโหลด (แน่นอนหน้าแรกสามารถทำได้ แต่ถ้าความเร็วอินเทอร์เน็ตช้ามากเมื่อเปิดหน้าแรกคุณต้องรอจนกว่าสถาปัตยกรรมหน้าทั้งหมดจะถูกโหลดก่อนที่ภาพจะปรากฏขึ้นแทนที่จะโหลดจากบนลงล่าง) ภาพจะต้องตั้งค่าเป็นความกว้างและแอตทริบิวต์ความสูงซึ่งช่วยให้สามารถครอบครองตำแหน่งบนหน้าได้มิฉะนั้นจะใช้ขนาดของภาพ GIF ที่โปร่งใสก่อนที่จะโหลด
การสาธิตต่อไปนี้ได้ทำการปรับเปลี่ยนหน้าเนื้อหาและการโหลดจะถูกเรียกใช้เมื่อ window.onload และ window.onscroll ถูกเรียกทั้งหมด
<! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-ype" content = "ข้อความ/html; charset = utf-8"/> <title> มาร์จิ้น: 0;}. wp {width: 1000px; มาร์จิ้น: 5px auto; Padding: 10px 0; ขอบด้านล่าง: 1px Solid #Dedede; ล้น: ซ่อน;}. fl {width: 700px; Padding: 25px; ลอย: ซ้าย; ชายแดน: 1px Solid #Dedede; สายไฟ: 40px; ล้น: ซ่อน;}. fr {ความกว้าง: 220px; ความสูง: 800px; ลอย: ขวา; พื้นหลังสี: #DedEde;}. AIMG {display: block; ความกว้างสูงสุด: 700px; มาร์จิ้น: 0 อัตโนมัติ; ความเป็นมา: URL (http://ctc.qzs.qq.com/aoi/img/icenter/loading.gif) ศูนย์กลางศูนย์กลางที่ไม่มีการรีเปท;} </style> </head> <body> <div> <a href = "http://www.cnblogs.com/xiaMou2014"> src = "http://pic.cnitblog.com/avatar/356740/20140716231521.png"> </a> <a href = "http://www.cnblogs.com/xiaomou2014"> http://www.cnblogs.com/xiaomou2014 </a> </div> <div> <div> <h2> เด็กหญิงอายุ 19 ปีที่มีมะเร็งขั้นสูง ที่ผ่านมา </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/0bd162d9f2d3572ce86585518881863 /><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/0b46f21fbe096b63eeba47dd0e338743 /><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/500fd9f9d72a60592b789441b2a3434343434343 สาวมะเร็งขั้นสูงที่มีการตัดแขนขาเมื่อ 7 ปีที่แล้ว </p> <a href = "http://news.ifeng.com/a/20140909/41906442_0.shtml#p=1" เป้าหมาย = "blank"> data-src = "http://y3.ifengimg.com/a/2014_37/03c4830691a6d8b.jpg"/> </a> <p> เด็กหญิงอายุ 19 ปีที่เป็นมะเร็งขั้นสูง href = "http://news.ifeng.com/a/20140909/41906442_0.shtml#p=1" target = "_ blank"> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/ac/b.gif" data-src = "http://y2.ifengimg.com/a/2014_37/89ed5c7eff33abf.jpg"/> </a> <p> เด็กหญิงอายุ 19 ปีที่เป็นมะเร็งขั้นสูง href = "http://news.ifeng.com/a/20140909/41906442_0.shtml#p=1" target = "_ blank"> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/ac/b.gif" data-src = "http://y2.ifengimg.com/a/2014_37/d4dbca6004ab9b7.jpg"/> </a> <p> เด็กหญิงอายุ 19 ปีที่เป็นมะเร็งขั้นสูง href = "http://news.ifeng.com/a/20140909/41906442_0.shtml#p=1" target = "_ blank"> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/ac/b.gif" data-src = "http://y3.ifengimg.com/a/2014_37/9349a4b2ee90309.jpg"/> </a> <p> เด็กหญิงอายุ 19 ปีที่เป็นมะเร็งขั้นสูง href = "http://news.ifeng.com/a/20140909/41906442_0.shtml#p=1" target = "_ blank"> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/ac/b.gif" data-src = "http://y2.ifengimg.com/a/2014_37/b2491836e230932.jpg"/> </a> </div> <div> </div> {document.getElementByClassName = function () {var ttagname = "*"; if (arguments.length> 1) {ttagname = อาร์กิวเมนต์ [1]; } if (arguments.length> 2) {var pobj = อาร์กิวเมนต์ [2]} else {var pobj = เอกสาร; } var objarr = pobj.getElementsByTagname (ttagname); var trobj = new Array (); สำหรับ (var i = 0; i <objarr.length; i ++) {ถ้า (objarr [i] .classname == อาร์กิวเมนต์ [0]) {trobj.push (objarr [i]); }} return trobj; }} // ฟังก์ชั่นการโหลดภาพ loadimg (imgclass, imgsrc) {// data-src: เส้นทางที่จะจัดเก็บภาพที่ต้องโหลด var arrimg = document.getElementByClassName (IMGCLASS); // อาร์เรย์ภาพที่มีคลาส IMGCLASS คลาสจะต้องโหลดแบบเรียลไทม์ (var i = 0; i <arrimg.length; i ++) {ถ้า (! 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] window.onload = window.onscroll = function () {loadimg ("AIMG", "data-src")} </script> </body> </html>