Автор оригинала: David Wong.
Поскольку информации на страницах становится все больше и больше, особенно на торговых сайтах, таких как Taobao и Jingdong, главная страница является их спасательным кругом!
В последнее время, когда мы работаем над веб-сайтом банка, мы можем привлечь больше внимания только за счет тесноты на первой странице. Поэтому всевозможные деловые люди начинают бороться за место на первой полосе, чтобы успокоить свою войну. Домашняя страница покрывает все их потребности, они удовлетворены вылетом, пришли результаты технического менеджера, сказали, что загрузка домашней страницы такая большая, значит, уменьшаем!!!
Прежде всего, уменьшите количество картинок K, недостаточно, затем, как это сделать, ну, перейдем к делу. Длинная страница не показывает, что часть не может загружаться первой, экономия трафика-это экономия денег, начните!!!
Идея состоит в том, чтобы определить положение картинки на странице. Если положение изображения больше или меньше текущей высоты экрана, то отобразите изображение, в противном случае скройте изображение.
Как скрыть картинки сначала очень просто, , дайте браузеру неизвестный атрибут csii_src, когда вам нужно отобразить картинки, в.getAttribute (“csii_src”); идея очень проста, код.
function lazyLoad() {
var map_element = {};
var element_obj = [];
var download_count = 0;
var last_offset = -1;
var doc_body = null;
var doc_element = null;
var lazy_load_tag = [];
function initVar(tags) {
doc_body = document.body;
doc_element = document.compatMode == 'BackCompat' ? doc_body: document.documentElement;
lazy_load_tag = tags || ["img", "iframe"];
};
function initElementMap() {
for (var i = 0,
len = lazy_load_tag.length; i < len; i++) {
var el = document.getElementsByTagName(lazy_load_tag[i]);
for (var j = 0,
len2 = el.length; j < len2; j++) {
if (typeof(el[j]) == "object" && el[j].getAttribute("csii_src")) {
element_obj.push(el[j]);
}// Welcome to join the whole stack development exchange circle to learn and exchange: 1007317281
}
}
for (var i = 0,
len = element_obj.length; i < len; i++) {
var o_img = element_obj[i];
var t_index = getAbsoluteTop(o_img);
if (map_element[t_index]) {
map_element[t_index].push(i);
} else {
var t_array = [];
t_array[0] = i;
map_element[t_index] = t_array;
download_count++;
}// Welcome to join the whole stack development exchange circle to learn and exchange: 1007317281
}
};
function initDownloadListen() {
if (!download_count) return;
/*var offset = (window.MessageEvent && !document.getBoxObjectFor) ? doc_body.scrollTop
: doc_element.scrollTop;*/
var offset;
if (os.firefox) {
offset = doc_element.scrollTop;
} else {
offset = doc_body.scrollTop;
}
var visio_offset = offset + doc_element.clientHeight;
if (last_offset == visio_offset) {
// setTimeout(initDownloadListen, 200);
return;
}
last_offset = visio_offset;
var visio_height = doc_element.clientHeight;
var img_show_height = visio_height + offset + 20;
for (var key in map_element) {
if (img_show_height > key) {
var t_o = map_element[key];
var img_vl = t_o.length;
for (var l = 0; l < img_vl; l++) {
element_obj[t_o[l]].src = element_obj[t_o[l]].getAttribute("csii_src");
}
delete map_element[key];
download_count--;
}
}
// setTimeout(initDownloadListen, 200);
};
function getAbsoluteTop(element) {
if (arguments.length != 1 || element == null) {
return null;
}
var offsetTop = element.offsetTop;
while (element = element.offsetParent) {
offsetTop += element.offsetTop;
}
return offsetTop;
}// Welcome to join the whole stack development exchange circle to learn and exchange: 1007317281
function init(tags) {
initVar(tags);
initElementMap();
initDownloadListen();
$(window).scroll(function() {
initDownloadListen();
});
};
init();
}эпилог
Спасибо, что посмотрели. Если есть какие-либо недостатки, вы можете критиковать и исправлять. Доступ к информации (iv), (iv) На этот раз мы рекомендуем бесплатную учебную группу, которая обобщает разработку веб-сайтов мобильных приложений, css , html , webpack, Vue-узел и ресурсы для интервью. Студенты, интересующиеся технологиями веб-разработки, могут присоединиться к группе Q: ??? 1007317281??? Независимо от того, являетесь ли вы Сяобаем или Дэниелом, я приветствую Дэниела в организации набора эффективных учебных маршрутов и учебных пособий, которыми он может поделиться с вами бесплатно, обновляя при этом видеоматериалы каждый день. Наконец, я желаю вам всем успехов в учебе как можно скорее, получить удовлетворительное предложение, получить быстрое повышение по службе и повысить зарплату, а также достичь вершин своей жизни.
Оригинал: “https://developpaper.com/how-to-realize-the-image-delayed-loading-on-the-homepage-of-the-website/”