0

我正在調試我寫的背景圖片幻燈片的過程。在IE 7和IE 8中加載圖像時無法設置標題屬性

腳本的流程是加載第一個圖像並顯示它,然後調用preloadImages函數,然後以預設間隔加載其餘圖像。

preload_img是我的插件(var preload_img = 1;)開始處定義的一個全局變量,用於跟蹤當前圖像編號被預加載並保持它的值,但該值不適用於標題屬性圖片。

// 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而它加載圖像時該圖像被加載的標題是一個空字符串(第二,未註釋的警報)(其被註釋顯示正確的值的第一個警報)被定義。

當頁面最初打開時(打開瀏覽器,輸入地址,按回車鍵),但每隔一段時間都不會出現問題。

這可能是我錯過的一些小事,但我已經花了最後一個小時看這個並且瘋了。

有在一個非常基本的測試案例:http://jsfiddle.net/72Sy6/4/ 警報生成所有我從IE7其中,具有當打開頁面時預期的數據測試除了瀏覽器的預期數據,但其他時間不。

我提前警告框道歉,但這是我在IE7知道調試的唯一途徑:X

編輯:未曾經歷IE 8與幻燈片錯誤,但這個測試用例顯示局部變量同樣是未定義的。

+0

你可以做一個[jsFiddle測試用例](http://jsfiddle.net/)? – thirtydot 2011-06-02 01:25:51

+0

我還沒有嘗試複製它(不知道它是多麼具體,如果我想浪費更多的時間),但給我仍然無法找到問題,它不能傷害嘗試:) – djlumley 2011-06-02 01:29:45

+0

更新了測試用例:)) – djlumley 2011-06-02 01:57:09

回答

0

對於原因,我不能完全肯定的,改變這個:

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(){ 
    //.. 
}); 

解決了這一問題。