VPF::JQuery - загрузка background-ов в цикле.

svch

Дата 6.6.2013, 18:59 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 116
Регистрация: 10.4.2006

Репутация: нет
Всего: нет

Добрый день !
Есть n-дивов. При загрузке страницы я хочу грузить в них фоновые картинки.

Код


    $("#result_content > ul > li > div").css("background", function(index) {
        var tmp_url = $(this).children().find("a").attr("href");
        tmp_url = tmp_url.substring(0, tmp_url.indexOf("."));
        var tmp_img = $(this);
        $.ajax({
            url: "../photo/" + tmp_url + "/search.jpg",
            success: function() {
                $(tmp_img).css("background", "url('../photo/" + tmp_url + "/search.jpg') 0px 0px no-repeat");
            },
            complete: function() {
            },
            error: function () {
            }
        });
    })

или

Код


    $("#result_content > ul > li > div").each(function(index) {
        var tmp_url = $(this).children().find("a").attr("href");
        tmp_url = tmp_url.substring(0, tmp_url.indexOf("."));
        var tmp_img = $(this);
        $.ajax({
            url: "../photo/" + tmp_url + "/search.jpg",
            success: function() {
                $(tmp_img).css("background", "url('../photo/" + tmp_url + "/search.jpg') 0px 0px no-repeat");
            },
            error: function () {
            }
        });
    })

В обоих случаях бекграунды не отображаются, пока скрипт не загрузит все картинки. А если дивов - 100, то ждать приходится очень долго. Хотелось бы при загрузке сразу его отображать.
Вариант:

Код


    $("#result_content > ul > li > div").each(function(index) {
        var tmp_url = $(this).children().find("a").attr("href");
        tmp_url = tmp_url.substring(0, tmp_url.indexOf("."));
        var tmp_img = $(this);
        $(tmp_img).css("background", "url('../photo/" + tmp_url + "/search.jpg') 0px 0px no-repeat");
    })

не подходит, т.к. на странице должна быть кнопка, которая отменяет все активные запросы.

Подскажите, в чем может быть дело ?

Большое спасибо.
С уважением, Сергей.

Arantir

Дата 6.6.2013, 20:42 (ссылка)

(нет голосов)

Загрузка ...

Рыбак без удочки

Профиль
Группа: Участник
Сообщений: 960
Регистрация: 18.11.2012

Репутация: 3
Всего: 55

Цитата(svch @ 6.6.2013, 17:59

)

        $.ajax({
            url: "../photo/" + tmp_url + "/search.jpg",
            success: function() {
                $(tmp_img).css("background", "url('../photo/" + tmp_url + "/search.jpg') 0px 0px no-repeat");
            },

Дело в том, что запросы, посылаемые браузером для ajax и для картинки в background получаются разными и кешируются отдельно.
Браузер кеширует не саму картинку, как набор бинарных данных. Он ориентируется на структуру запроса.
Абсолютно одна и та же картинка по двум разным URL будет загружена браузером дважды (даже если оба URL указывают на тот же файл на сервере) и кешироваться они будуть отдельно.

Но... в принципе можно схитрить и сделать запросы одинаковыми...

Код


$.ajax({
    url: "../img/logo4.png",
    headers: { 
        Accept : "image/png,image/*;q=0.8,*/*;q=0.5",
    },
    complete: function() {
        $('body').css("background", "url('../img/logo4.png') 0px 0px no-repeat");
    },
});

Теперь все заголовки запроса (сксорее всего) сойдутся с обычным запросом картинки.
Должно получится задуманное:
user posted image

Но вообще более надежно делать вот так:

Код


    var img = new Image();
    img.onload = function() {
        $('body').css("background", "url('../img/logo4.png') 0px 0px no-repeat");
    };
    img.src = "../img/logo4.png";

Во-первых, тут только один запрос. При установке background браузер второй раз запрос посылать не будет, ибо для одного и того же url картинки делается только один запрос и потом иcпользуется для всех картинок с этим url.
Во-вторых, из-за первого это кроссбраузерно. Ибо через ajax различия в заголовках между ajax-запросом и запросом картинки могут быть разными у разных браузеров или зависеть от настроек пользователя.

Это сообщение отредактировал(а) Arantir - 6.6.2013, 20:48

--------------------

interface Жопа {
// ATTENTION: has to be implemented by every class of the project for proper project work
}

svch

Дата 6.6.2013, 21:19 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 116
Регистрация: 10.4.2006

Репутация: нет
Всего: нет

Я пробовал сделать вот так:

Код


var img = new Image();
...

Но дело в том, что я не знаю, как остановить такую загрузку.

Вообще у меня вот какая задача:
- на странице есть n-блоков
- при загрузке всем блокам загрузить разные background-ы
- сделать кнопку, при нажатии на которую все загрузки останавливаются

Если делать загрузку фонового рисунка через

Код


        $.ajax({
            url: "../photo/" + tmp_url + "/search.jpg",
            success: function() {
                $(tmp_img).css("background", "url('../photo/" + tmp_url + "/search.jpg') 0px 0px no-repeat");
            },
            error: function () {
            }
        });

то можно в код вставить

Код


    $.xhrPool = [];
    $.xhrPool.abortAll = function() {
        $(this).each(function(idx, jqXHR) {
            jqXHR.abort();
        });
        $.xhrPool = [];
    };

    $.ajaxSetup({
        beforeSend: function(jqXHR) {
            $.xhrPool.push(jqXHR);
        },
        complete: function(jqXHR) {
            var index = $.xhrPool.indexOf(jqXHR);
            if (index > -1) {
                $.xhrPool.splice(index, 1);
            }
        }
    });

и сделать кнопку, при нажатии на которую все эти аяксы останавливаются

Код


$.xhrPool.abortAll();

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

Код


    var imageObj = new Image();
    var tmp_img = $(this);
    $(imageObj).attr("src", "../photo/" + tmp_url + "/search.jpg").load(function() {
        $(tmp_img).css("background", "url('../photo/" + tmp_url + "/search.jpg') 12px 12px no-repeat");
    });

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

С уважением, Сергей.

Arantir

Дата 6.6.2013, 21:38 (ссылка)

(нет голосов)

Загрузка ...

Рыбак без удочки

Профиль
Группа: Участник
Сообщений: 960
Регистрация: 18.11.2012

Репутация: 3
Всего: 55

Все браузеры поддерживают свойство complete у картинки, которое указывает на то, загружена ли картинка. По нему и можно остановить все недогруженные картинки, установив им в src пустую строку (или какую-то картинку-заменитель).

Просто надо созданные объекты Image хранить в массиве, чтобы можно было их перебрать.

Что-то вроде этого:

Код


var imgs = new Array(); // глобальный массив

// ...
var imageObj = new Image();
imgs.push(imageObj);
var tmp_img = $(this);
$(imageObj).attr("src", "../photo/" + tmp_url + "/search.jpg").load(function() {
    $(tmp_img).css("background", "url('../photo/" + tmp_url + "/search.jpg') 12px 12px no-repeat");
});

// ...
function stop()
{
    for (img in imgs)
    {
        if (!img.complete)
            img.src = '';
    }
    imgs = new Array();
}

--------------------

interface Жопа {
// ATTENTION: has to be implemented by every class of the project for proper project work
}

svch

Дата 7.6.2013, 08:02 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 116
Регистрация: 10.4.2006

Репутация: нет
Всего: нет

Что-то не получается у меня остановить их ф-ей "stop()"
Все равно картинки продолжают грузиться.

С уважением, Сергей.

Arantir

Дата 7.6.2013, 13:03 (ссылка)

(нет голосов)

Загрузка ...

Рыбак без удочки

Профиль
Группа: Участник
Сообщений: 960
Регистрация: 18.11.2012

Репутация: 3
Всего: 55

Хм... Похоже браузеры не умеют останавливать загрузку конкретной картинки/ресурса из-под JS.

Есть метод

Код


window.stop()

Он останавливает загрузку всех загружаемых в данный момент ресурсов. Вот только если еще не загрузились другие картинки (фон body и т.п.), то они тоже остановятся. В этом случае загрузку фонов всех этих div-ов надо будет начинать по window.onload (полная загрузка), а не document.ready (загрузка DOM).

В ином случае можно картинки загружать по очереди и сделать флажок для остановки:

Код


var current = 0;
var divs = $("#result_content > ul > li > div");
var img_loading = true;

function loadImg(index) {
    var imageObj = new Image();
    var tmp_img = divs[index];
    $(imageObj).attr("src", "../photo/" + tmp_url + "/search.jpg").load(function() {
        $(tmp_img).css("background", "url('../photo/" + tmp_url + "/search.jpg') 12px 12px no-repeat");
        if (img_loading)
         loadImg(index + 1);
    });
}

function stop() {
    img_loading = false;
}

--------------------

interface Жопа {
// ATTENTION: has to be implemented by every class of the project for proper project work
}

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Применение библиотек \| Следующая тема »