使用全局變量在循環內調用圖像onload

Question

變量menuitems是一個關鍵值對。該鍵包含名稱，並且該值包含圖像網址。這個想法是將下面的URL存儲在本地存儲中。

本地存儲變量爲key_icon（關鍵是圖像的名稱）

下面是代碼。假設有account,sms,group和history這4個密鑰。

$.each(menuitems, function(key, value) { 
    menu_icon_session_name = key+'_icon'; 
    var dataImage = localStorage.getItem(menu_icon_session_name); 

    //The Div container to load the image 
    div = "<div class='ui-block-a'><div class='ui-bar' id='div_"+key+"' style='padding:5px'>" + 
    "<img crossorigin='anonymous' width=150 height=150 id='btn_"+key+"' style='height: 100%; width:100%'>" 
    "</div></div>"; 

    //Append the div container with empty image 
    jQuery('#pg_home_content').append(div); 

    //Based on the local storage load the image 
    if(dataImage){ 
     console.log('loaded from session'); 
     bannerImg = document.getElementById('btn_'+key); 
     bannerImg.src = dataImage; 
     jQuery('#div_'+key).html(bannerImg); 
    }else{ 
     console.log('loaded from url'); 
     bannerImage = document.getElementById('btn_'+key); 
     bannerImage.setAttribute('crossOrigin', 'anonymous'); 

     bannerImage.src = value.menu_icon; 
     bannerImage.onload = function() { 
      imgData = getBase64Image(bannerImage); 
      localStorage.setItem(menu_icon_session_name, imgData); 
      console.log('stored '+menu_icon_session_name); 
     } 
    } 
}); 

由於onload是asynchronous變量menu_icon_session_name被覆蓋，所有圖像都存儲在最後一個變量history_icon。

所有我試圖做的是加載所有的4個圖像分離的localStorage和以後使用它...

Answer 1

...stuff... 

    bannerImage.src = value.menu_icon; 
    bannerImage.attr('data-my-session-name', menu_icon_session_name); 
    bannerImage.onload = function() { 
     imgData = getBase64Image(this); 
     localStorage.setItem($(this).attr('data-my-session-name'), imgData);    

...stuff...