Блог

Главная - Вопросы по программированию - Запуск кода после загрузки css, но до загрузки изображений

Запуск кода после загрузки css, но до загрузки изображений

#javascript #jquery #html #css

#javascript #jquery #HTML #css

Вопрос:

У меня есть веб-сайт, проблема, с которой я сталкиваюсь, заключается в

Загрузка изображений требует времени, в моей системе загрузка всего веб-сайта занимает около 20 секунд. Отображается загрузчик, который скрывается в окне.событие загрузки, т.е. когда загружается весь веб-сайт (20 секунд).

Если я скрою загрузчик в событии document.ready, веб-сайт отображается быстро, что хорошо для пользователя. Но здесь проблема в том, что некоторый контент отображается без применения CSS в течение примерно 2 секунд, что выглядит странно.

Я ищу способ скрыть загрузчик, как только css загружается, а изображения нет.

Комментарии:

1. Загрузка вашего веб-сайта не должна занимать 20 секунд. Вы должны потратить время на оптимизацию своего веб-сайта. Вы можете использовать этот инструмент для анализа того, что должно быть оптимизировано на вашем веб-сайте — developers.google.com/speed/pagespeed/insights

2. Вы также можете оптимизировать свои изображения и попробовать отложить их загрузку в качестве крайней меры.

Ответ №1:

Что-то, что я делал в прошлом, что может сработать для вас, — это замена изображения src на data-src подобное:

 <img src="" data-src="your-image.jpg" alt="some alt description">

Затем все, что вам нужно сделать, это добавить некоторый JavaScript, который перебирает DOM, заменяя данные-src на src:

 jQuery(document).ready(function($){
    $('img').each(function(){
        $(this).attr('src') = $(this).data('src');
    });
});

Преимущества этого метода заключаются в том, что ваша веб-страница будет отображать CSS до того, как будут загружены все изображения. И это также означает, что страница будет загружаться очень быстро.
Потенциальным недостатком является то, что это не подходит для SEO изображений (изображения Google или Bing)