ФорумПрограммированиеJavaScript → Preload картинок

Preload картинок

  • md5

    Сообщения: 11948 Репутация: N Группа: в ухо

    Spritz 27 августа 2008 г. 4:04

    Как прелоадить картинки?
    чтобы при динамической смене картинки с помощью js, оно не грузилось, а уже было загружено
    все умрут, а я изумруд
  • Trej Gun

    Сообщения: 5299 Репутация: N Группа: в ухо

    Spritz 27 августа 2008 г. 4:06, спустя 1 минуту 51 секунду


    var img = new Image();
    img.src = 'loading.gif';
  • kendo

    Сообщения: 446 Репутация: N Группа: Адекваты

    Spritz 27 августа 2008 г. 12:45, спустя 8 часов 39 минут 9 секунд

    boolean img.complete

    А сим свойством узнаем, загружена картинка до конца или нет :-)
  • Z-MODe

    Сообщения: 199 Репутация: N Группа: Кто попало

    Spritz 23 июля 2009 г. 11:19, спустя 329 дней 22 часа 33 минуты

    Мне постоянно возвращается false и работать не хочет(((

    var img1 = new Image();
    img1.src = 'images/aboutcompany_on.jpg';

    var img2 = new Image();
    img2.src = 'images/obusluge_on.jpg';

    var img3 = new Image();
    img3.src = 'images/investor_on.jpg';

    var img4 = new Image();
    img4.src = 'images/partners_on.jpg';

    var img5 = new Image();
    img5.src = 'images/contacts_on.jpg';

    var preload = img1.complete && img2.complete && img3.complete && img4.complete && img5.complete;
  • phpdude

    Сообщения: 26624 Репутация: N Группа: в ухо

    Spritz 23 июля 2009 г. 11:21, спустя 2 минуты 5 секунд

    Z-MODe, если бы ты еще понимал что ты делаешь и почему фолс …. то ты бы не задавал такие вопросы :)
    Сапожник без сапог
  • Z-MODe

    Сообщения: 199 Репутация: N Группа: Кто попало

    Spritz 23 июля 2009 г. 15:43, спустя 4 часа 21 минуту 54 секунды

    Жаль что линка не последовало.. ибо реально не понимаю..

    но думаю вопрос решился.. jquery

     jQuery.preload = function() {
    jQuery.each (arguments,function (e) {
    jQuery("<img>").attr("src", this);
    });
    }



  • adw0rd

    Сообщения: 22905 Репутация: N Группа: в ухо

    Spritz 23 июля 2009 г. 15:50, спустя 7 минут 5 секунд

    Z-MODe, а для чего ты делал
    new Image();
    и вообще что хотел сделать?
    adw/0
  • Z-MODe

    Сообщения: 199 Репутация: N Группа: Кто попало

    Spritz 23 июля 2009 г. 15:53, спустя 3 минуты 30 секунд

    Есть меню из картинок.. просто фирменный шрифт все дела.. ну и при наведении картинка меняется.. ну и тупо не клёво, когда навёл, а у тебя квадрат с крестом(

    Хотел подгрузить все картинки в фоне, и анимировать это меню только при условии, что все картинки загружены.
  • phpdude

    Сообщения: 26624 Репутация: N Группа: в ухо

    Spritz 23 июля 2009 г. 15:57, спустя 3 минуты 16 секунд

    Z-MODe, сут ьв том, что ты просишь браузер создать изображение из нужного урла. все круто, НО! … НО!!! !!!!!! но чтобы узнать загружены они были или нет, тебе недостаточно complete проверить .. тебе надо его проверять с интервалом, ибо браузер грузит кратинки в асинхронном режиме относительно страницы. и соответственно, ты просто какбе говоришь "загрузи" … и он дальше яваскрипт выполняет, а картинки в этот момент загружаются :)

    тебе надо либо setInterval либо весит image.onload = function …

    надеюсь понятно объяснил
    Спустя 58 сек.

    Есть меню из картинок.. просто фирменный шрифт все дела.. ну и при наведении картинка меняется.. ну и тупо не клёво, когда навёл, а у тебя квадрат с крестом(

    Хотел подгрузить все картинки в фоне, и анимировать это меню только при условии, что все картинки загружены.
    не пробовал в одну картинку класть свой фирменный шрифт в 2 видах : наведенный и ненаведенный ? ну и при наведении просто margin или тп для нее делать?
    Сапожник без сапог
  • adw0rd

    Сообщения: 22905 Репутация: N Группа: в ухо

    Spritz 23 июля 2009 г. 16:00, спустя 3 минуты 38 секунд

    Z-MODe, используй css-sprites для подгрузки картинок твоего меню


    рабочий код, для того чтобы ты понял как надо делать, но лучше юзай jq:


    <script type="text/javascript">
    function imgChange ()
    {
       var img = document.getElementById('img');
       img.src = 'img2.png';
    }
    </script>

    <img id="img" src="img1.png" onclick="imgChange(); return false;" />
    adw/0
  • phpdude

    Сообщения: 26624 Репутация: N Группа: в ухо

    Spritz 23 июля 2009 г. 16:05, спустя 4 минуты 44 секунды

    adw0rd, так это то он и понял. суть в том, что когда ты наведешь мышкой, то браузер НАЧНЕТ загружать и первые 1-5 секунд там будет пусто вместо картинки. в ИЕ6 будет блядский крестик =)) а если их все фейково подгрузить при onload то когда наведешь она уже из кеша будт браться соответственно быстрее в миллионы раз ))
    Сапожник без сапог
  • adw0rd

    Сообщения: 22905 Репутация: N Группа: в ухо

    Spritz 23 июля 2009 г. 16:09, спустя 3 минуты 52 секунды

    phpdude, а, ясно, ну тогда ему css-спрайты и img.style в помощь
    adw/0
  • Z-MODe

    Сообщения: 199 Репутация: N Группа: Кто попало

    Spritz 23 июля 2009 г. 19:28, спустя 3 часа 18 минут 46 секунд

    phpdude,
    1. Я об этом подумал, но потом понял, что реализовал не так, как подумал.

    2. Как эт делаетсо? как вариант думал сделать бекграунд в виде наведённой..



  • phpdude

    Сообщения: 26624 Репутация: N Группа: в ухо

    Spritz 23 июля 2009 г. 16:09, спустя 20 часов 41 минуту 58 секунд


    phpdude, а, ясно, ну тогда ему css-спрайты и img.style в помощь
    ксс спрайты да, норм
    Сапожник без сапог
  • Givi

    Сообщения: 2284 Репутация: N Группа: Адекваты

    Spritz 24 июля 2009 г. 2:50, спустя 10 часов 40 минут 14 секунд

    Z-MODe, я при возможности делаю так:
    1. Ссылку делаю блочным элементом с заданными размерами.
    2. Прописываю для ссылки фоновую картинку по умолчанию
    3. Прописываю для ссылки фоновую картинку по хуверу (a:hover)
    3.1. Удобнее всего сделать пункт 2 и 3 одной картинкой со смещением при наведении.
    4. Делаю для ссылки размер шрифта в 0, высоту линии (я не знаю как оно правильно называется по-русски - line-height) тоже 0
    5. Вписываю в ссылку текст, идентичный тому, который на картинке или же просто текст ссылки, который мне нужен
    6. В результате получаю графическую ссылку с хувером + при глюке с ЦССкой есть текстовые нормальные ссылки, а крестиков никаких нет, потому как картинки и не грузятся вовсе :)

Пожалуйста, авторизуйтесь, чтобы написать комментарий!