Блог

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

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

preload_img это глобальная переменная, определенная в начале моего плагина ( var preload_img = 1; ), которая отслеживает текущий номер загружаемого изображения и сохраняет его значение, как и должно быть, но это значение не применяется к атрибуту title изображения.

 // load the images in sequence one after another
function preloadImages()
{
    clearInterval(interval_preload);

    var div = '<div id="' options.id_holder preload_img '" class="bg_img_holder"></div>';
    $('#' options.id_wrapper).append(div);

    var img = new Image();

    //alert("loading: "   options.img_path   images[preload_img].image   " "   preload_img);
    $(img).load(function()
    {
        alert("loaded: "   $(this).attr('src')   " "   $(this).attr('title'));
        $img_holder = $('#' options.id_holder $(this).attr('title'));

        $img_holder.append(this)
        .css({
        'display':      'none',
        'background-color': images[$(this).attr('title')].background,
        'z-index':      -500
        })
        .find('img')
        .height($img_holder.width() * 0.5625);

    }).attr({
        'src':      options.img_path   images[preload_img].image,
        'title':    preload_img
    });

    //if there's another image to load after this one
    if(  preload_img < (images.length))
    {
        interval_preload = setInterval(preloadImages,1500);
    }
}
  

Хотя preload_img он определен при загрузке изображения (первое закомментированное предупреждение показывает правильное значение), при загрузке изображения заголовок является пустой строкой (второе, без комментариев предупреждение).

Проблема не возникает при первоначальном открытии страницы (откройте браузер, введите адрес, нажмите enter), но возникает через раз.

Возможно, я пропустил что-то незначительное, но я потратил последний час на просмотр этого и схожу с ума.

Здесь есть действительно простой тестовый пример:http://jsfiddle.net/72Sy6/4 Предупреждения генерируют ожидаемые данные во всех браузерах, которые я тестировал, кроме IE7, который имеет ожидаемые данные при открытии страницы, но во всех остальных случаях этого не делает.

Заранее приношу извинения за поля с предупреждениями, но это единственный известный мне способ отладки в IE7: X

редактировать: в IE 8 не возникало ошибок со слайд-шоу, но этот тестовый пример показывает, что локальные переменные аналогично не определены.

По причине, в которой я не совсем уверен, изменяя это:

 var img = new Image();
$(img).load(function(){
    //..
}).attr({
    'src':      options.img_path   images[preload_img].image,
    'title':    preload_img
});
  

к этому:

 var img = $('<img src="' images[preload_img].image '" title="' images[preload_img].title '" />');
$(img).load(function(){
    //..
});
  

исправлена проблема.