تصفح مواقع الويب الكبيرة ، وخاصة الصور مع المزيد من الصور ، مثل مواقع التجارة الإلكترونية الكبيرة. ستجد أن الشاشة الأولى موجودة خارج الشاشة الأولى. يتم تحميل الصور عند التمرير لأسفل. ليست هناك حاجة لتحميل جميع الصور في البداية. وبهذه الطريقة ، تم تحسين سرعة فتح الويب بشكل كبير. فيما يلي الأفكار التي فكر بها المؤلف في الوقت الحاضر. إذا كان لديك فكرة أفضل ، آمل أن تقدم لي بعض النصائح.
في الواقع ، فكرة تحميل الوقت الحقيقي بسيطة للغاية. عندما تبدأ الصفحة في التحميل ، فإن الصور التي لا تحتاج إلى تحميلها من البداية (مثل الصور الموجودة أسفل الشاشة الثانية ، يجب عليك التمرير لأسفل لرؤيتها على أي حال. من الأفضل أن يتم تحميلها في الوقت الفعلي عند التمرير لأسفل) إلى خاصية مخصصة ، مثل: <img src = "http://ctc.qzonesty.gtimg.cn/ACF" Data-Src = "http://y3 السمة المخصصة "http://y3 عند التمرير لأسفل إليه ، استبدل القيمة في البيانات SRC بقيمة SRC ، ثم قم بإزالة سمة البيانات SRC ...
ما يلي هو العرض التوضيحي
<! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3 xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html ؛ charset = utf-8"/> <title> js loading </title> <torm> الهامش: 0 ؛}. wp {width: 1000px ؛ الهامش: 5px Auto ؛ الحشو: 10px 0 ؛ Border-Bottom: 1px Solid #Dedede ؛ الفائض: مخفي ؛} ul li {display: block ؛ العرض: 250 بكسل ؛ تعويم: اليسار. الهامش: 5px 0 ؛ قائمة القائمة: لا شيء ؛}. AIMG {Display: Block ؛ الارتفاع: 300 بكسل ؛ Max-Width: 348px ؛ الحدود: 1 بكسل Solid #EEE ؛ الخلفية: url (http://ctc.qzs.qq.com/aoi/img/icenter/loading.gif) src = "http://pic.cnitblog.com/avatar/356740/20140716231521.png"> </a> <a href = "http://www.cnblogs.com/xiaomou2014"> http://www.cnblogs.com/xiaomou2014 </a> cont2 الصورة التي تبدأ بالبدء يتم تحميلها في الوقت الحقيقي </div> <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/c83d70cf3bc79f3d8cd19a31cd11cd11728b28b28d1cpg. /> </a> </li> <li> <img src = "http://h.hiphotos.baidu.com/image/w٪3d310/sign=19bbb515ff1f4134e037037f151e95c1/b7fd5266d016092411114bd8aedd60735fae7cd34. /> </li> <li> <img src = "http://g.hiphotos.baidu.com/image/w٪3d310/sign=dbbb83d4b540923aa69657fa258d1dc/b812c8fcc3cec3fdaa0ce16bd4888f879427f812c8fcc3cec3fdaa0ce0ce0ce0ce16bd4888f87942712. /> </li> <li> <img src = "http://c.hiphotos.baidu.com/image/w٪3d310/sign=8e78cf5936a85edffa8cf822795409d8/bba1cd11728b47108b5bc5c1cec3fdfc032346 /> </li> <li> <img src = "http://e.hiphotos.baidu.com/image/w٪3d310/sign=75538617df54564EE565E23883DE9CDE/C2CEC3FDFC039245E8F5B0B8594A4C27D1E25E25E25E25E25E2. /> </li> <li> <img src = "http://d.hiphotos.baidu.com/image/w٪3d310/sign=4e7eef2892ef76c6d0d2fd2aad17fdf6/a9d3fd1f4134970a9bed2d2697cad1c865d18 /> </li> <li> <img src = "http://a.hiphotos.baidu.com/image/w٪3d310/sign=22e5b431bc096b63811958513c328733/ac345982b2b7d0a22457777c9ef76094b369 /> </li> <li> <img src = "http://g.hiphotos.baidu.com/image/w٪3d310/sign=d76eb55fb335333faf5b6952f98d2fdca/ac6eddc451da81cbf76dbf9c50666016016082431d3.jpgnjpg". /> </li> <li> <img src = "http://f.hiphotos.baidu.com/image/w٪3d310/sign=7f41436edbf9d72a1764161ce42a282a/adaf2edda3cc7cd9e813883b01213fb80e91aaa /> </li> <li> <img src = "http://b.hiphotos.baidu.com/image/w٪3d310/sign=d1e3fa4567380cd7e61ea4ec9145ad14/ae51f3deb48f8c54f573c0da3829292df5e1fe7fa6.jpfa6 /> </li> <li> <img src = "http://e.hiphotos.baidu.com/image/w٪3d310/sign=03c6a3c737fae6cd0cb4ad603fb10f9e/b151f8198618367a4e593d2c738bd4b21ce56a /> </li> <li> <img src = "http://a.hiphotos.baidu.com/image/w٪3D310/Sign=2C2009A6D01B0EF46CE89E5FEDC651A1/B219EBC4B74543A90AC41C41C178A801145E.JPGE.JPGE ] src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src = "http://y3 href = "http://news.ifeng.com/a/20140909/41906442_0.shtml#p=1" target = "_ Blank"> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/ac/acf" data-src = "http://y2.ifeng.com/a/2014_37/89ed5c7eff333abf.jpg"/> </a> </li> <li> <a href = "http://news.ifeng.com/a/201409/4190642_0.shtml > <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" target = "_ Blank"> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/ac/acf" data-src = "http://y3.ifengimg.com/a/2014_37/9349A4B2EE90309 > <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=655bcf71d31373f0f53f699e940f4b8b/86d6277f9e2f07089c207d0aeb24b8999 /> </li> <li> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src = "http://d.hiphotos.baidu.com/image/w٪3d310/sign=3629f39bad51f3dec3b2bf65a4eff0ec/94cad1c8a786c917d4016968cb3d70cf3bc757764.jpgnajpgn. /> </li> <li> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src = "http://f.hiphotos.baidu.com/image/w٪3d310/sign=8c009502257f9e2f70351b092f31e962/9922720e0cf3d7ca56401892f01fbebe /> </li> <li> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src = "http://a.hiphotos.baidu.com/image/w٪3d310/sign=f62f43b6ab73912c4268360c8198675/A1EC08FA513D269759C20D56577FB2FB4316D8 /> </li> <li> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src = "http://e.hiphotos.baidu.com/image/w٪3d310/sign=9CE0B545A918972BA33A06CBD6CC7B9D/A873912B31BB051B4EF3A79347ADAB4BEDE09C.JPGNOJPDE09C.JPGNOJPDE09C. /> </li> <li> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src = "http://a.hiphotos.baidu.com/image/w٪3d310/sign=9d833f1b950a304e5222a6fbebe1c9a7c3/d1160924ab18972b49bd5e4cd7b899e510 /> </li> <li> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src = "http://a.hiphotos.baidu.com/image/w٪3d310/sign=4a93da2a552c11dfded1b92253266255/d62a6059252d42a007e1c62013b5c87.jpg /> </li></ul> </viv> <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/f703738da97391274b38fc4fa19861837ae2fa2fa2fa2fa2fa2fa2fa2fa2fa2fa2fa2fa2fa2fa2fa2fa2fa2fa2fa2fa2fa /> </li> <li> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" Data-Src = "http://d.hiphotos.baidu.com/image/w٪3d310/sign=53e69395b8a1cd1105b674218913c8b0/ac4bd11373f08202f195e69a499fbfedab641b0b0b0b.jpgb.jpgb.jpgb.jpgnjpb.jpnjpb.jpnjpnjpb.jpnjpb.jpnjpnjpb.jpnjpnjpnjpnjpb /> </li> <li> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src = "http://h.hiphotos.baidu.com/image/w٪3d310/sign=3749c38a4334970a4773162ea5cbd1c0/5366d0160924ab1808b1ea9237fae6cd7a890. /> </li> <li> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src = "http://ehiphotos.baidu.com/image/w٪3d310/sign=8563bf5757fbb2fb342b5e137f4b2043/3b87e950352ac65cccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccb5 /> </li> <li> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src = "http://f.hiphotos.baidu.com/image/w٪3d310/sign=74856b065e6034a829e2be80fb1249d9/d000baa1cd11728baab06e25cavc3fd9 /> </li> <li> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src = "http://c.hiphotos.baidu.com/image/w٪3d310/sign=49e22cda34d12f2ece05a8617fc2d5ff/cdbf6c81800a19d88e30c908331fa828ba61e461e461e468f.jpnjpnjpnjpn46. /> </li> <li> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" Data-Src = "http://d.hiphotos.baidu.com/image/w٪3d310/sign=539b0d21347adab43dd01d42bd5b36b/54fbb2fb43166d2e4c8ab9d42309f79052d2d2d2d2d2d2d2d2d2d2d2d2d2d2d2d2d2d2d2d2d2d2d2d2d2d2d2d2d2d2d2d2d2d2d2d2d2d2. /> </li> <li> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src = "http://b.hiphotos.baidu.com/image/w٪3d310/sign=5077c2c2c1cec3fd8b3ea174e689d4b6/4afbfbedab64034f9195fd08adc379310 /> </li> <li> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src = "http://a.hiphotos.baidu.com/image/w٪3d310/sign=50bdad348418367aad8979dc1e728b68/3c6d55fbb2fb43168dce1a67223308f7de /> </li> <li> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src="http://b.hiphotos.baidu.com/image/w%3D310/sign=f3ef9fa4e9c4b7453494b117ffd1e78/0bd162d9f2d3572ce86585518813632763d0c3bc.jpg" /> </li> <li> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src = "http://a.hiphotos.baidu.com/image/w٪3d310/sign=30a6338deb24b899de3c7f395e071d59/0b46f21fbe096b63eeba47dd0e338744448ac9f.jpg /> </li> <li> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" Data-Src = "http://g.hiphotos.baidu.com/image/w٪3d310/sign=75a14ae060d9f2d320112ee99eC8a53/500fd9f9d72a60592b78941b2a34349b0373bba4.jpgn42 /> </li> </ul> </viv> <script> // متوافق مع IE pair getElementsByClassNameif (navigator.appname == 'Microsoft Internet Explorer') {document.getElementsByClassName = function () {var ttagname = "*" ؛ if (edations.length> 1) {ttagname = mations [1] ؛ } if (encuments.length> 2) {var pobj = enduments [2]} else {var pobj = document ؛ } var objarr = pobj.getElementsByTagName (ttagname) ؛ var trobj = new array () ؛ لـ (var i = 0 ؛ i <objarr.length ؛ i ++) {if (objarr [i] .className == ediuments [0]) {trobj.push (objarr [i]) ؛ }} return trobj ؛ }} // وظيفة تحميل الصورة loadimg (imgclass ، imgsrc) {// data-src: مسار تخزين الصورة المراد تحميلها var arrimg = document.getElementsByClassName (imgclass) ؛ // أحتاج إلى تحميل صفيف الصورة باستخدام الفئة imgclass في النافذة الزمنية الحقيقية. 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.oncroll يتم تشغيلها.
<! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3 xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html ؛ charset = utf-8"/> <title> js loading </title> <torm> الهامش: 0 ؛}. wp {width: 1000px ؛ الهامش: 5px Auto ؛ الحشو: 10px 0 ؛ Border-Bottom: 1px Solid #Dedede ؛ الفائض: مخفي ؛}. fl {width: 700px ؛ الحشو: 25 بكسل ؛ تعويم: اليسار. الحدود: 1px الصلبة #Dedede ؛ رفع الخط: 40 بكسل ؛ الفائض: مخفي ؛}. fr {width: 220px ؛ الارتفاع: 800 بكسل ؛ تعويم: صحيح. خلفية اللون: #dedede ؛}. AIMG {Display: Block ؛ Max-Width: 700px ؛ الهامش: 0 Auto ؛ الخلفية: url (http://ctc.qzs.qq.com/aoi/img/icenter/loading.gif) 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> <fiv> <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/0bd162d9f2d3572ce86585518813632763d0c3bc.jpg" /><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/0b46f21fbe096b63eeba47dd0e338744448ac9f.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=75a14ae060d9f2d320112EE99EC8A53/500FD9F9D72A60592B78941B2A34349B0333BA فتاة السرطان مع بتر منذ 7 سنوات </p> <a href = "http://news.ifeng.com/a/20140909/41906442_0.shtml#p=1" target = "_ blant"> <img src = "http://ctcckzonestyle.gimty 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/acf" Data-Src = "http://y2.ifengimg.com/a/2014_37/89ed5c7eff333abf.jpg"/> </a> <p> فتاة تبلغ من العمر 19 عامًا مصابة بسرطان متقدم تم ببتها منذ 7 سنوات </p> href = "http://news.ifeng.com/a/20140909/41906442_0.shtml#p=1" target = "_ Blank"> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/ac/acf" Data-Src = "http://y2.ifengimg.com/a/2014_37/d4dbca6004ab9b7.jpg"/> href = "http://news.ifeng.com/a/20140909/41906442_0.shtml#p=1" target = "_ Blank"> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/ac/acf" data-src = "http://y3.ifengimg.com/a/2014_37/9349A4B2EE90309 href = "http://news.ifeng.com/a/20140909/41906442_0.shtml#p=1" target = "_ Blank"> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/ac/acf" data-src = "http://y2.ifengimg.com/a/2014_37/b2491836e230932.jpg"/> = function () {var ttagname = "*" ؛ if (edations.length> 1) {ttagname = mations [1] ؛ } if (encuments.length> 2) {var pobj = enduments [2]} else {var pobj = document ؛ } var objarr = pobj.getElementsByTagName (ttagname) ؛ var trobj = new array () ؛ لـ (var i = 0 ؛ i <objarr.length ؛ i ++) {if (objarr [i] .className == ediuments [0]) {trobj.push (objarr [i]) ؛ }} return trobj ؛ }} // وظيفة تحميل الصورة loadimg (imgclass ، imgsrc) {// data-src: المسار لتخزين الصورة التي يجب تحميلها var arrimg = document.getElementsByClassName (imgclass) ؛ // يجب تحميل صفيف الصورة مع فئة الفئة 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]. window.onload = window.onscroll = function () {loadimg ("AIMG" ، "Data-Src")} </script> </body> </html>