Раздражающее изображение погрузки (HTML/CSS)

У меня есть веб-сайт со многими уменьшенными изображениями. Уменьшенные изображения определяются как это:

  •  
    

    и CSS, который производит их:

    Глобальный img-CSS:

    img {
        display: block; 
        margin: 0; 
        padding: 0; 
        border: none; 
        background: url('../images/load.gif') no-repeat center;
    }
    

    Специальный код CSS для уменьшенных изображений:

    .gallery ul li img {    
        width: 174px;
        height: 174px;
        padding: 4px;   
        border: 1px solid #FFFFFF;      
    }
    

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

    http://s7.directupload.net/images/130225/v3l3hkfs.png

    У вас есть какая-либо идея, как я могу удалить этот символ?

    С уважением, Оливер

    0
    nl ja de

    3 ответы

    Те - браузер, произведенный, таким образом, вы наклоняетесь, избавляются от них, и символ будет зависеть от используемого браузера. Чтобы не сделать, чтобы они показали, что необходимо было бы включить JavaScript, чтобы отдать изображения от холста или сделать некоторое предварительно загружение.

    3
    добавлено

    Вы могли добавить бланк .png или .gif как источник изображения и затем изменить src, как только изображение загружается.

    Править: Хороший способ сохранить оригинальный src с признаком данных:

    
    
    2
    добавлено

    slamborne большое спасибо!

    Я создал времена на 1 пкс прозрачный blank.png на 1 пкс и затем я modifed мой HTML-ТЭГ:

    echo "
  •  ";
    

    Как вы видите, blank.png - источник изображения. blank.png загружается очень быстро, потому что это - очень крошечная картина. Мой следующий шаг должен был удостовериться, что реальное изображение загружается после того, как страница загружается.

    Чтобы сделать так, я написал простую функцию JavaScript, которая изменяет все "src" признаки изображений к ценности признаков "данных-src":

    <script type="text/javascript" 
    function neueSrc() {
        var all = document.getElementsByTagName("img");
        for (var i=0, max=all.length; i < max; i++) {   
            all[i].src = all[i].getAttribute('data-src');
        }
    }
    </script>
    

    Эта функция выполняется в теге основного текста:

    <body onload="neueSrc()">
    

    Это точно, что я хотел! Большое спасибо за вас быстрые ответы и полезная помощь.

    0
    добавлено
    You' приветствие ре. Я знаю что этот isn' t для фонового изображения, но I' m просто бросающий это там, потому что это была твердая проблема, чтобы разыскать. I' у ve были проблемы в прошлом использовании 1x1 изображения пкс фоновых изображений так I' ve, выработавший привычку использования 2x2 изображения пкс самого маленького размера.
    добавлено автор slamborne, источник
    Верстка сайтов HTML/CSS/JS/PHP
    Верстка сайтов HTML/CSS/JS/PHP
    3 439 участник(ов)

    Правила группы: напишите !rules в чате. Группа Вк: vk.com/web_structure Freelancer: @web_fl Веб Дизайн: @dev_design Маркетолог: @topmarkening Автор: @M_Boroda

    CSS — русскоговорящее сообщество
    CSS — русскоговорящее сообщество
    1 502 участник(ов)

    Сообщество любителей CSS Возникли проблемы с CSS? – пиши сюда, обсудим и предложим самое лучшее решение Работа: @css_ru_jobs Правила: https://teletype.in/@css_ru/r1EWtQ2w7 Приходите в наши чаты @javascript_ru и @frontend_ru Флуд: @css_flood

    Чат — Типичный Верстальщик
    Чат — Типичный Верстальщик
    1 080 участник(ов)

    Основной канал: @tpverstak Обратная связь: @annblok Все ссылки на соц.сети проекта: http://taplink.cc/tpverstak ПРАВИЛА ЧАТА — https://teletype.in/@annblok/BygPgC3E7

    Веб-Технологи: UI/UX, Вёрстка, Фронтенд
    Веб-Технологи: UI/UX, Вёрстка, Фронтенд
    167 участник(ов)

    Всё про веб-дизайн и вёрстку. А также: HTML, CSS, флекс и бутстрапы, шаблонизаторы, препроцессоры, методологии, аглифаеры, улучшаторы и обфускаторы. Обсуждаем темы юзабилити, устраиваем А/В тесты лендингов, и проводим аудит.

    DTP :: @DTPublish
    DTP :: @DTPublish
    147 участник(ов)

    Обсуждаемые темы: полиграфия, препресс, верстка, дизайн, иллюстрации, скрипты, плагины. Канал - @DTPublishing

    css_jobs
    css_jobs
    26 участник(ов)

    Чат для вопросов по css и html: @css_ru Флуд: @css_flood Канал с вакансиями и резюме: @css_jobs_feed

    css_флуд
    css_флуд
    10 участник(ов)