Вопрос по background-image, image, ruby-on-rails, css, html – Загрузка фоновых изображений CSS перед обычными изображениями?

3

У меня есть веб-приложение ruby on rails, и в некоторых видах у меня много тяжелых изображений (<img> ) для визуализации.<img> генерируются в помощнике.

Проблема в том, что сначала загружается css, затем js, затем тяжелые изображения, а затем, наконец, css справочные фоновые изображения.

Все тяжелые изображения загружаются довольно долго, поэтому весь сайт остается на виду.

Я хочу сначала загрузить фоновые изображения CSS, а затем загрузить другие изображения, поскольку они, очевидно, содержат визуальную структуру страницы.

рельсы версия: 2.3.8

РЕДАКТИРОВАТЬ: Спасибо, ребята, я прошу прощения за то, что не поделились кодом ранее.

У меня есть две модели: категории и изображения, каждая категория имеет много изображений. В представлении у меня есть список категорий, который создается помощником:

 
categories.each do |cat|
    html << "<a href='##{cat.id}' class='mapcat' >#{cat.libelle}</a>"
end

и когда я нажимаю на категорию изображения отображаются

 categories_images.each do |i|
    html << "<div id='#{i.id}' class='#{css}'><img src='/images_moi/categories/#{cat.libelle}/#{i.path_file_name}' />"
  end

У меня есть css фоновое изображение, связанное со списком категории Проблема в том, что изображения (<img>) отображается перед фоновыми изображениями css списка категорий.

Ваш Ответ

4   ответа
0

Не используйте тег img.

Создайте спрайт, содержащий все ваши изображения. Загрузите спрайт в свой файл application.html один раз.Используйте данные Uris для передачи данных непосредственно в HTML. Видетьhttp://css-tricks.com/data-uris/
Проблема со спрайтом CSS заключается в том, что мне нужно изменить CSS (огромный файл) приложения, и это занимает слишком много времени. Сейчас мне нужно быстрое решение, но в долгосрочной перспективе я определенно буду использовать css sprite. SelimN
Я думаю, что тогда я бы использовал AJAX для загрузки изображений, включая загрузочную анимацию. Получите изображения с помощью ajax, как только они будут загружены, покажите их с хорошим переходом. Hendrik
0

чтобы лениво загружать изображения, используя jquery и теги данных. Этот подход также позволяет мне выбирать разные изображения в зависимости от ширины устройства и запасных пользователей планшетов / мобильных устройств.

<img src="" data-src="/img/graphic-desktop.jpg" data-smallsrc="/img/graphic-smaller.jpg" alt="Graphics" class="lazy" />

<!-- the following would be in your js file -->
$lazy = $('img.lazy');

$(window).load(function(){
  // window load will wait for all page elements to load, including css backgrounds
  $lazy.each(function(){
    // run thru each img.lazy on the page. spare the jquery calls by making $this a variable
    $this = $(this);
    // if the window is greater then 800px wide, use data-src, otherwise, use the smaller graphic
    ($(window).width() >= 800) ? $this.attr('src', $this.attr('data-src')) : $this.attr('src', $this.attr('data-smallsrc'));
  });
});
7

Мы должныпредполагать вещи, потому что вы не поделились своим кодом.

Что касается вашего запроса, сейчас вы можете предварительно загрузить изображения, используяJQuery:

function preload(arrayOfImages) {
    $(arrayOfImages).each(function(){
        $('<img/>')[0].src = this;
        // Alternatively you could use:
        // (new Image()).src = this;
    });
}

// Usage:

preload([
    'img/imageName.jpg',
    'img/anotherOne.jpg',
    'img/blahblahblah.jpg'
]);

Это экономит время загрузки изображений.

Я хочу предварительно загрузить фоновые изображения CSS, а не <img> SelimN
Я обнаружил, что это ненадежно в Firefox - иногда он просто сбрасывает изображение, как толькоimg тег получает сборщик мусора, и он должен быть загружен снова. Я обычно вставляю сгенерированные теги изображений вdiv с участиемdisplay: noneПросто, чтобы действительно прибить их. user1618143
2

Используйте строку base64.

Пример:

background-image: url(data:image/png;base64,*CONVERTED IMAGE DATA HERE*);
без: **онлайн конвертер:http://webcodertools.com/imagetobase64converterнота: Я только предложил бы это, если размер изображения не слишком тяжел.

Похожие вопросы