JS Picture в реальном времени загрузка обеспечивает скорость открытия веб-страницы

Автор：Eve Cole Время обновления：2025-04-07 03:32:01

Просмотрите большие веб-сайты, особенно картинки с большим количеством фотографий, таких как большие сайты электронной коммерции. Вы обнаружите, что первый экран находится за пределами первого экрана. Картинки загружаются при прокрутке вниз. Нет необходимости загружать все картинки в начале. Таким образом, скорость открытия сети значительно улучшена. Ниже приведены идеи, о которых автор думал в настоящее время. Если у вас есть лучшая идея, я надеюсь, что вы дадите мне несколько советов.

На самом деле, идея загрузки в реальном времени очень проста. Когда страница начинает загружаться, картинки, которые не нужно загружать с самого начала (например, изображения под вторым экраном, вам нужно прокручивать вниз, чтобы увидеть их в любом случае. Лучше настроить их на загрузку в режиме реального времени при прокрутке вниз) в пользовательское свойство, например: <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" http://ctc. Data-Src = "http://y3.ifengimg.com/a/2014_37/03c4830691a6d8b.jpg"/>, src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif"-это трансплановое изображение 1px*1px. Пользовательский атрибут «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-type" content = "text/html; charset = utf-8"/> <Title> JS-обращение загружается в режиме реального времени </title> <style>*{addding: 0; Маржа: 0;}. WP {ширина: 1000px; Маржа: 5px Auto; Заполнение: 10px 0; Пограничный подвод: 1PX SOLID #DEDEDE; переполнение: hidden;} ul li {display: block; Ширина: 250px; Плавание: осталось; Полевая: 5px 0; Список стиля: none;}. aimg {display: block; Высота: 300px; максимальная ширина: 348px; Граница: 1PX SOLID #EEE; Предпосылки: URL (http://ctc.qzs.qq.com/aoi/img/icenter/loading.gif) no-repeat center Center;} </style> </head> <body> <div> <a href = "http://www.cnblogs.com/xiaomou2014"> <img://www.cnblogs.com/xiaomou2014 " 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> <div> 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/c83d70cf3bc79f3d8cd19a31b8a1cd117b29fa.jpa.jpa.j.jpa.jpa.jpa.jpa.jpa.jpa.jpa.jpa.j.jpa.jpa.jpa.j. /> </a> </li> <li> <img src = "http://h.hiphotos.baidu.com/image/w%3D310/Sign=19BB515FF1F4134E037037F151E95C1/B7FD5266D016092414BD8AEDD60735FAE74AF.JPGAFG.JPG.JPGAFGAFGAFGAFGAFE74AF. /> < /li> <li> <img src = "http://g.hiphotos.baidu.com/image/w%3D310/Sign=DBBEB83D4B540923AA69657FA258D1DC/B812C8FCC3CEC3FDAA0CE16BD488D43F87BC3CEC3FDAA0CE16BD488D43F87F9.JPG9. /> </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=75538617DF54564EE565E23883DE9CDE/C2CEC3FDFC039245EA8F5B0B8594A4C27DFC039245EA8F5B0B8594A4C27DFC039245EA8F5B0B8594A4C27FC039245EA8F5B0B8594A4C27FC039245EA8F5B0B8594A4C27FC039245EA8F5B0B8594A4C27FC039245EA8 /> < /li> <li> <img src = "http://d.hiphotos.baidu.com/image/w%3D310/Sign=4EF2892EF76C6D0D2FD2AAD17FDF6/A9D3FD1F4134970A9BD2D2697CAD1C8A7865D18.JPG" /> </li> <li> <img src = "http://a.hiphotos.baidu.com/image/w%3D310/Sign=22e5b431bc096b63811958513C328733/AC345982B2B7D0A224577783C96094B369A15.J.J.J.J.J.J.J.J.J.J.J.J. /> < /li> <li> <img src="http://g.hiphotos.baidu.com/image/w%3D310/sign=d76eb55fb33533faf5b6952f98d2fdca/ac6eddc451da81cbf76dbf9c5066d016082431d3.jpg" /> < /li> <li> <img src = "http://f.hiphotos.baidu.com/image/w%3D310/sign=7f41436edbf9d72a1764161CE42A282A/Adaf2edda3cc7cd9e81d13883b01213fb80e91aa.jpge.jpge.jpga.jpga.jpga.jpga.jpga.jpga.jpga.jpga.jpga.jpg.jpga.J /> </li> <li> <img src = "http://b.hiphotos.baidu.com/image/w%3D310/Sign=d1e3fa4567380cd7e61ea4ec9145AD14/ae51f3deb48f8c54f573c0da38292df5e1fa6.jjpg573c0da38292df5e1fa6.jjpg573c0da38292df5e1fa6f8c54f573c0da38292df5e1fa6f8c54f573c0da38292df5.jjpg8c54f573c0da38292df5. /> < /li> <li> <img src = "http://e.hiphotos.baidu.com/image/w%3D310/Sign=03C6A3C737FAE6CD0CB4AD603FB10F9E/B151F8198618367A4E593D2D2C738BD4B21CE56A.JPGG.JSPGG.JSPGG.JSPGGI. /> < /li> <li> <img src = "http://a.hiphotos.baidu.com/image/w%3D310/Sign=2C2009A6D01B0EF46CE89E5FEDC651A1/B219EBC4B74543A90AC4BB441C178A82B805E.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> </li> <li> <a href = "http://news.ifeng.com/a/20140909/41906442_0.shtml#p=1" target = "_ blank"> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" Data-Src = "http://y2.ifeng.com/a/2014_37/89ed5c7eff33abf.jpg"/> </a> </li> <li> <a href = "http://news.ifeng.com/a/20140909/41906442_0.shtml.com/a/20140909/4190642_0.shtml.com/a/20140909/4190642_0.shtml.com/a/20140909/4190642_0.shml. > <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src = "http://y2.ifengimg.com/a/2014_37/d4dbca6004ab9b7.jpg"/> </li> <li> href = "http://news.ifeng.com/a/20140909/41906442_0.shtml#p=1" target = "_ blank"> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" Data-Src = "http://y3.ifengimg.com/a/2014_37/9349a4b2ee90309.jpg"/> </a> </li> <li> <a href = "http://news.ifeng.com/a/20140909/41906442_0.shtm..com/a/20140909/41906442_0.shtm..com/a/20140909/41906442_0.s.ifeng.com/a/20140909/41906442_0.sht.ifeng.com/a/20140909/41906442_0. > <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src = "http://y2.ifengimg.com/a/2014_37/b2491836e230932.jpg"/> </a> </li> <li> src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src="http://e.hiphotos.baidu.com/image/w%3D310/sign=655bcf71d31373f0f53f699e940f4b8b/86d6277f9e2f07089c207d0aeb24b899a901f297.jpg" /> </li> <li> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src = "http://d.hphotos.baidu.com/image/w%3D310/Sign=3629F39BAD51F3DEC3B2BF65A4EFF0EC/94CAD1C8A786C917D4016968CB3D70CF3B7576.JPG" /> </li> <li> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src = "http://f.hiphotos.baidu.com/image/w%3D310/Sign=8C009502257F9E2F70351B092F31E962/9922720E0CF3D7CA56401892F01FBBE096A63A9B.JPG.JPG.JPG.JPG.JPG.JPG.JPG.JPG.JPG.JPG.JPG.JPG.JPG.JPG.JPG.JPG.JPG.JPG.JPG.JPG.JPG.JPG.JPG.JPG.JPG.JPG.JPG.JPG.JPG.JPG.JPG3D7CA56401892F01FBE092720 /> </li> <li> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src = "http://a.hiphotos.baidu.com/image/w%3D310/Sign=f62f43b6ab773912C4268360C8198675/A1EC08FA513D269759C20D5657FBBBI.1613D269759C20D5657FBBBI. /> </li> <li> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src = "http://e.hiphotos.baidu.com/image/w%3D310/Sign=9ce0b545a918972Ba33a06CBD6CC7B9D/A8773912B31BB051B4EF3A79347ADAB444BBEDE0.JPG" /> </li> <li> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src = "http://a.hiphotos.baidu.com/image/w%3D310/Sign=9D833F1B950A304E5222A6FBE1C9A7C3/D1160924AB18972B49B4BD5E4CD7B899E510A0A0A0P.JPG" /> </li> <li> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src = "http://a.hiphotos.baidu.com/image/w%3D310/Sign=4a93da2a552c11dfded1b92253266255/D62A6059252DD42A007E1C62013B5B5C887.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/F703738DA977391274B38FC4FA1986187AI977391274B38FC4FA1986187 /> </li> <li> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src="http://d.hiphotos.baidu.com/image/w%3D310/sign=53e69395b8a1cd1105b674218913c8b0/ac4bd11373f08202f195e69a49fbfbedab641b0b.jpg" /> </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.JJPG1808B1EA9237FAE6CD7A890BBE.JJPG1808B1EA9237FAE6CD790BBE.JJPG1808B1EA9237FAE6CD790BBEB.JJPG1808B1EA9237FAE6CD790BBE.JJPG1808B1EA9237FAE6CD790BBEB.JJBA. /> </li> <li> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src = "http://e.hiphotos.baidu.com/image/w%3D310/Sign=8563BF5757FBB2FB342B5E137F4B2043/3B87E950352AC65CCB5D179F9F2B211938A0.JPG.JPG.JPG.JPG.JPG.JPG.JPG.JPG.JPG.JPG.JPG.JPG.JPG.JPG.JPG.JPG.JPG.JPG.JPG.JPG.JPG.JPG.JPG.JPG.JPG.JPG.JPG.JPG.JPG.JPG.J. /> </li> <li> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src = "http://f.hiphotos.baidu.com/image/w%3D310/Sign=74856B065E6034A829E2BE80FB1249D9/D000BA1CD11728BAAAB06E25CAFCCC3C3FD2C1C.JPG> src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src = "http://c.hiphotos.baidu.com/image/w%3D310/Sign=49e22cda34d12f2ece05a8617fc2d5ff/cdbf6c81800a19d88e30c90831fa828ba61800a1988e30C90831FA828BA61800" /> </li> <li> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src = "http://d.hphotos.baidu.com/image/w%3D310/Sign=539b0d21347Adab43dd01d42bbd5b36b/54fbb2fb43166d22e4c8ab9d442309f7905278.jsjpg" /> </li> <li> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src = "http://b.hiphotos.baidu.com/image/w%3D310/Sign=5077C2C2C1CEC3FD8B3EA174E689D4B6/4AFBBBBEDAB64034F9195FD08ADC379310A55517.JPG95FD08ADC379310A5517.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/3c6d55fbb2fb43168dce1a6722a4462308f7d3de.jpg" /> </li> <li> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src = "http://b.hiphotos.baidu.com/image/w%3D310/Sign=f3ef9fa4e9c4b7453494b117ffd1e78/0bd162d9f2d3572ce86585518813632763d3b.jpg.jpg.J /> </li> <li> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src = "http://a.hiphotos.baidu.com/image/w%3D310/Sign=30A6338DEB24B899DE3C7F395E071D59/0B46F21FBE096B63EBA47DD0E3387444F.JPGAPGABGPGSG4 /> </li> <li> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src = "http://g.hiphotos.baidu.com/image/w%3D310/Sign=75a14ae060d9f2d3201122ee99ec8a53/500FD9F9D72A60592B78941B2A34349B0333BBA60592B78941B2A34349B0333BBA42.JPG" /> </li> </ul> </div> <script> // Совместимо с IE Pair GetElementsByClassNameif (navigator.appname == 'Microsoft Internet Explorer') {document.getElementsbyclassname = function () {var ttagname = "*"; if (arguments.length> 1) {ttagName = аргументы [1]; } if (arguments.length> 2) {var pobj = аргументы [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 == аргументы [0]) {trobj.push (objarr [i]); }} return trobj; }} // Функция загрузки изображения LoadImg (imgclass, imgsrc) {// data-src: путь к хранению изображения для загрузки var arrimg = document.getElementsbyclassname (imgclass); // Мне нужно загрузить массив изображений с помощью класса imgclass в windows в режиме реального времени. Anscroll = function () {for (var i = 0; i <arrimg.length; i ++) {if (! Arrimg [i] .getattribute (imgsrc))) {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);}}}} wordMg ("aiMg", "data-src");

Например, изображения в продолжительном 1 в демонстрации выше отображаются, как только страница загружена. Выплата домашней страницы фиксирован. Вы можете подтвердить, что эти изображения находятся под вторым экраном. Однако для страницы содержимого местоположение изображений в основном контейнере содержимого неконтролируемо. Это требует, чтобы при загрузке реальной страницы определяется, находятся ли они в визуальном диапазоне. Если он находится в визуальном диапазоне, он загружается (конечно, домашняя страница также может сделать это, но если скорость интернета очень медленная, при открытии домашней страницы вам нужно ждать, пока вся архитектура страницы не будет загружена до отображения изображения, вместо загрузки ее сверху вниз). Картина должна быть установлена на атрибуты ширины и высоты, что позволяет ему занимать позицию на странице, в противном случае она будет занимать только размер прозрачного изображения GIF перед загрузкой.

Следующая демонстрация внесла некоторые изменения на страницу содержимого, и загрузка запускается, когда все запускаются window.onload и windo.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-type" content = "text/html; charset = utf-8"/> <Title> JS-обращение загружается в режиме реального времени </title> <style>*{addding: 0; Маржа: 0;}. WP {ширина: 1000px; Маржа: 5px Auto; Заполнение: 10px 0; Пограничный подвод: 1PX SOLID #DEDEDE; переполнение: hidden;}. fl {ширина: 700px; Заполнение: 25px; Плавание: осталось; Граница: 1px solid #dedede; высота линии: 40px; переполнение: hidden;}. Fr {width: 220px; Высота: 800px; Поплавок: верно; фоновый цвет: #Deded;}. AIMG {Display: Block; максимальная ширина: 700px; Поле: 0 Авто; Предпосылки: URL (http://ctc.qzs.qq.com/aoi/img/icenter/loading.gif) no-repeat center Center;} </style> </head> <body> <div> <a href = "http://www.cnblogs.com/xiaomou2014"> <img://www.cnblogs.com/xiaomou2014 " 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> <h2> 19-летняя девочка с усовершенствованным раком, которая ампутировала 7 лет. Я назад data-src = "http://b.hiphotos.baidu.com/image/w%3D310/Sign=f3ef9fa4e9c4b7453494b117ffd1e78/0bd162d9f2d3572ce86585518813632763d3b.jpg.jpg.J /><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/0B46F21FBE096B63EBA47DD0E3387444F.JPGAPGABGPGSG4 /><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.jpg" /><p>A 19-year-old advanced Девушка для рака с ампутацией 7 лет назад </p> <a href = "http://news.ifeng.com/a/20140909/41906442_0.shtml#p=1" target = "_ Blank"> <img src = "http://ctc.qzonesty.gtimg.cmac/b.gif.gif.gif.gif.gif.gif. data-src = "http://y3.ifengimg.com/a/2014_37/03c4830691a6d8b.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/b.gif" data-src = "http://y2.ifengimg.com/a/2014_37/89ed5c7eff33abf.jpg"/> </a> <p> 19-летняя девочка с продвинутым раком, у которой 7 лет назад, у которого ампутировали 7 лет назад </p> < href = "http://news.ifeng.com/a/20140909/41906442_0.shtml#p=1" target = "_ blank"> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src = "http://y2.ifengimg.com/a/2014_37/d4dbca6004ab9b7.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/b.gif" data-src = "http://y3.ifengimg.com/a/2014_37/9349a4b2ee90309.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/b.gif" Data-Src = "http://y2.ifengimg.com/a/2014_37/b2491836e230932.jpg"/> </a> </div> <div> </div> <sript> // Совместимо с IE Pair GetElementsBassNameif (vavigator.appname == 'microsoft intertect') {document.getElementsbyclassname = function () {var ttagname = "*"; if (arguments.length> 1) {ttagName = аргументы [1]; } if (arguments.length> 2) {var pobj = аргументы [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 == аргументы [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] .getattribute (imgsrc)); arrimg [i] .RemoVeatTribute (imgsrc);}}} window.onload = window.onscroll = function () {loadimg ("aimg", "data-src")} </script> </body> </html>