За последние 24 часа нас посетил 17841 программист и 1719 роботов. Сейчас ищут 950 программистов ...

Посчёт загруженных елементов на JS (картинок) - Прелоадер

Тема в разделе "JavaScript и AJAX", создана пользователем Игорь_Vasinsky, 14 дек 2009.

  1. Игорь_Vasinsky

    Игорь_Vasinsky Активный пользователь

    С нами с:
    13 ноя 2008
    Сообщения:
    203
    Симпатии:
    0
    Адрес:
    Уфа
    ОоОо..

    С офсайта качал jquery1.3.2 - Opera выдавала ошибки...
    Взял здесь v1.2.6 http://vstatusah.ru/js/jquery.js - усё путём.

    И снова к теме....

    Делую выводы: стало быть не запрещая кэш мы можем объективно показывать не "загружено: 10 из 10", а процентное соотношение, по логике ведь скрипт подсчитает процент от необходимого количества графики, которую он должен загрузить ,

    Только вот подсчёт общего числа картинок он будет считать по тегам img.... Тогда опять не соответствие.

    К примеру:

    НА странице 20 картинок
    Скрипт подсчитает их все 20 шт и возьмет их за 100%
    Но во время зарузки он подсчитает загрузку не закэшенных картинок и % от реала будет неверен.


    Голова кругом......
     
  2. Игорь_Vasinsky

    Игорь_Vasinsky Активный пользователь

    С нами с:
    13 ноя 2008
    Сообщения:
    203
    Симпатии:
    0
    Адрес:
    Уфа
    не понял чем оперировать...

    т.е. вижу


    Код (Text):
    1. document.getElementById(id).innerHTML = parseInt(image_loaded*100/max)+"%";
    ставлю свой id но данных не получаю.... или не так ?
     
  3. Mat

    Mat Активный пользователь

    С нами с:
    12 дек 2006
    Сообщения:
    391
    Симпатии:
    0
    Да нет, тебе нужно обратить внимание на image.onload() и от этого плясать, функция для примера. Главное - это принцип! onload срабатывает после того как изображение загрузилось клиенту.
    Другими словами ты делаешь:

    [js]
    var myImg = Array(); // определяешь как массив

    myImg = new Image(); // создаешь Image - тоже самое если бы ты в странице вставил тег <img />

    myImg.onload = function()... //тут определяешь что будет по onload делать... хоть alert поставь.

    myImg.src = p.getAttribute('src'); // присваиваешь src (относительный путь картинки)

    //myImg.flag = p.getAttribute('flag'); //можешь добавить свое свойство с которым будешь оперировать...
    [/js]

    А дальше браузер сам всё сделает, конечно это без JQ.
     
  4. Mat

    Mat Активный пользователь

    С нами с:
    12 дек 2006
    Сообщения:
    391
    Симпатии:
    0
  5. Вльдемар

    Вльдемар Активный пользователь

    С нами с:
    20 май 2006
    Сообщения:
    635
    Симпатии:
    0
    Адрес:
    Белхород

    Я специально картинки большие впендюрил.
    Заметил такую особенность, если нажать F5, то браузер нормально подсчитывает. А если поставить курсор в строку запроса и нажать ентер, то 0 из 5
     
  6. Игорь_Vasinsky

    Игорь_Vasinsky Активный пользователь

    С нами с:
    13 ноя 2008
    Сообщения:
    203
    Симпатии:
    0
    Адрес:
    Уфа
    Я вот как раз твой скрипт тестирую

    Малёха пришлось модернизовать


    Код (Text):
    1. $('document').ready(function(){
    2. var cnt = $("img").length; //определение переменной, содержащей общее кол-во изображений (img)
    3. $('#cnt').text(cnt);  // это не использую
    4. $('body img').load(function(){   // я так понял момент загрузки картинок
    5. var loading = parseInt($('#load').text()) + 1;  // преобразование объекта в число .... что то типа этого + увеличение
    6. if (loading > cnt){    //  внизу поясню зачем этот предел
    7. loading = cnt;
    8. $("#loadingDiv").hide("fast"); // скрытие прелоадера
    9. }
    10. var percent = parseInt((loading*100)/cnt);  // процент загрузки
    11. $('#load').text(percent);   // вставляю в #load
    12. });
    13. });
    Теперь поясняю:


    if (loading > cnt){
    loading = cnt;
    $("#loadingDiv").hide("fast");
    }

    IE почему-то через раз принимает этот скрипт, вместо того чтобы подсчитать колво загруженных элементов - он производит счёт выше общего кол-ва картинок (cnt) - значение доходит до этого и увеличивается дельше, с секундным интервалом (считает далеко).


    В Opera, Mozilla всё путём, а вот с IE такая беда... Вообщем я изначально хотел сделать процент отабражения загрузки, т.к. юзер мог (на маленьких скоростях) мог подумать что сайт висит...

    Я не совсем дружу с JS, так что фактитески тыком получилась эта бойда.

    Взгляните, мож предложения поступят какие к правке кода.[/quote]
     
  7. Игорь_Vasinsky

    Игорь_Vasinsky Активный пользователь

    С нами с:
    13 ноя 2008
    Сообщения:
    203
    Симпатии:
    0
    Адрес:
    Уфа
    Я вот как раз твой скрипт тестирую

    Малёха пришлось модернизовать


    Код (Text):
    1. $('document').ready(function(){
    2. var cnt = $("img").length; //определение переменной, содержащей общее кол-во изображений (img)
    3. $('#cnt').text(cnt);  // это не использую
    4. $('body img').load(function(){   // я так понял момент загрузки картинок
    5. var loading = parseInt($('#load').text()) + 1;  // преобразование объекта в число .... что то типа этого + увеличение
    6. if (loading > cnt){    //  внизу поясню зачем этот предел
    7. loading = cnt;
    8. $("#loadingDiv").hide("fast"); // скрытие прелоадера
    9. }
    10. var percent = parseInt((loading*100)/cnt);  // процент загрузки
    11. $('#load').text(percent);   // вставляю в #load
    12. });
    13. });
    Теперь поясняю:


    if (loading > cnt){
    loading = cnt;
    $("#loadingDiv").hide("fast");
    }

    IE почему-то через раз принимает этот скрипт, вместо того чтобы подсчитать колво загруженных элементов - он производит счёт выше общего кол-ва картинок (cnt) - значение доходит до этого и увеличивается дельше, с секундным интервалом (считает далеко).


    В Opera, Mozilla всё путём, а вот с IE такая беда... Вообщем я изначально хотел сделать процент отабражения загрузки, т.к. юзер мог (на маленьких скоростях) мог подумать что сайт висит...

    Я не совсем дружу с JS, так что фактитески тыком получилась эта бойда.

    Взгляните, мож предложения поступят какие к правке кода.