Обсуждение обработки изображений Taobao
Страница Таобао очень большая, но она открывается очень быстро. В обработке изображения используется загрузка прокрутки, что означает, где бросает ось прокрутки и где изображение загружено. Но если вы хотите проверить его исходный код, это потребует много усилий, потому что их сжатие и слияние кода сделаны хорошо! Поскольку изображение загружается при прокрутке, а изображение не загружается во время инициализации, затем, когда вы обновляете страницу внизу страницы, нижняя страница обычно не загружается. Похоже, что подход Taobao (потому что я не смотрел на их исходный код, только на основе операций), освежающий, чтобы вернуть страницу до вершины.
Подражать табао и прокручивать картинки, чтобы загрузить
Вот три способа подумать:
1. JavaScript Lazy Загрузка зрительной области загрузка
<! Doctype html> <html lang = "en"> <Head> <meta charset = "UTF-8"> <Title> Harooms Front-End Blog-Visual Area Загрузка JavaScript </title> <style> IMG {ширина: 100%; Margin-Bottom: 30px; Мин-высот: 400px; фоновый цвет: #ddd;} </style> </head> <body> <img haroomslazyload = "chrysanthemum.jpg" src = ""> <img haroomslazyload = "desert.jpg" src = ""> <img haroomsload = "desert.jpg" src = ""> <img haroomsload = "jpg" "? src = ""> <img haroomslazyload = "koala.jpg" src = ""> <img haroomslazyload = "lighthouse.jpg" src = ""> <img haroomslazyload = "penguins.jpg" src = ""> <img haroomsload = "tulips.jpg" src = "> <img haroomsload =" imgnum = document.getElementsbytagname ('img'). Length; var imgobj = document.getElementsbytagname ("img"); var l = 0; window.onscroll = function () {var seeHeheight = document.documentelement.clientHeight; var scrolltop = document.documentelement.scrolltop || document.body.scrolltop; for (var i = l; i <imgnum; i ++) {if (imgobj [i] .OffSetTop <seeHeight+scrolltop) {console.log (imgobj [i] .getAttribute ("src")); console.log (imgobj [i] .src); if (imgobj [i] .getattribute ("src") == "") {imgobj [i] .src = imgobj [i] .getattribute ("aaoroomslazyload"); }} if (imgobj [i] .OffSetTop> seeHehight + scrolltop) {l = i; перерыв; }}}} </script>Пожалуйста, обратите внимание на две мои консольные выходы, console.log (imgobj [i] .src); Чтобы получить весь адрес браузера!
2. jQuery Lazy Загрузка зрительной области загрузки
Вышеуказанный JS переводится с jQuery!
var l = 0 // JS Метод перевод версии $ (window) .bind ("scroll", function (event) {for (var i = l; i <$ ("img"). Length; i ++) {if ($ ("img"). EQ (i) .Offset (). Top <parseint ($ (window).). if ($ ("img"). EQ (i) .Attr ("src") == "") {var lazyloadsrc = $ ('img'). Eq (i) .attr ("aaoroomslazyload"); if ($ ("img"). EQ (i) .Offset (). Top> parseint ($ (window) .height ()) + parseint ($ (window) .scrolltop ())) {l = i;3. Расширение загрузки зрительной области
Например, эффект анимации или изображение холста, эффект, который я хочу достичь, заключается в том, что он не загружается изначально. При прокрутке на анимацию или диаграмму он будет загружен. Затем мы можем сделать следующие улучшения на основе приведенного выше кода:
$ (window) .bind ("scroll", function (event) {// Высота окна + высота невидимой вершины = высота нижней части экрана с верхней части var thisbuttomtop = parseint ($ (window) .height ()) + parseint ($ (window) .scrolltop ()); из верхней части экрана из Top var picturetop = parseint ($ (window) .offset (). Top); Ваша функция загрузки здесь, и функция загрузки будет перемещена из исходного документа. готова здесь!Освежиться вверх
Когда мы делаем зрительную зону, загружаем, мы обычно позволяем ей освежиться на вершину. Как Таобао. Окружитесь вверх.
Я не знаю, как это делает Таобао. Обновите вверх, я использовал событие OnbeforeUnload.
События OnbeForeUnload и Ounload, нагрузку и нагрузку, оба вызываются при освещении или закрытии. Они могут быть указаны в сценарии <Script> через window.onunload или в <body>. Разница состоит в том, что до нагрузки выполняется перед нагрузкой, она также может предотвратить выполнение нагрузки.
Основная нагрузка также вызывается, когда страница обновляется или закрыта. Оказор загрузка вызывается, когда он собирается перейти на сервер, чтобы прочитать новую страницу, но она еще не начала ее читать. OnuNload прочитал новую страницу, которую необходимо загрузить с сервера, и вызывается, когда текущая страница будет заменена. Onulload не может предотвратить обновления и закрытия страниц. И на ForueUnload это может сделать это.
1. Только нагрузка выполняется при загрузке страницы
2. Когда страница закрыта, сначала выполните предварительную загрузку и, наконец, нагрузка
3. Когда обновляя страницу, сначала выполните навсегда загрузку, затем загрузку и, наконец, нагрузки.
Освеживание вверху - это использовать это событие, вы можете написать его так.
window.onbeforeunload = function () {$ (window) .scrolltop (0);}Когда все изображения на веб -сайте используются, но область загружена, а CSS и JS объединены и сжаты, скорость и производительность нашего веб -сайта будут значительно улучшены!
Если вы хотите сделать это как Taobao, вы можете улучшить код.
Фактически, идея отсроченной загрузки состоит в том, чтобы сначала поместить изображение в Data-SRC или свойство. Когда страница скользит в визуальную область, назначьте сохраненный адрес изображения SRC.
Я не буду перечислять код здесь.