Poniższy kod ma skalować obraz i wstawiać jako tło do div-a.
Problem jest taki że przy ładowaniu strony nie działa poprawnie...wchodzi w onload ale obraz wstawiany to czarne pole.
Tak samo jest po odświeżeniu strony.
Jeżeli kod umieszczam w zdarzeniu resize obiektu window po załadowaniu strony jest to samo natomiast przy zmianie rozmiaru okna przeglądarki działa poprawnie .
Proszę o wskazówkę która rozwiąże problem.
Kod
$('bkdb1').remove();
var imgTloBlok_nr1 = new Image(1920,876);
imgTloBlok_nr1.src = 'images/bkg-blok-nr1-v2.jpg';
imgTloBlok_nr1.onload=new function(){
$('html,body').append('<canvas id="bkdb1" style="display:none"></canvas>');
var can = document.getElementById('bkdb1');
var ctx = can.getContext('2d');
can.width = window.innerWidth;
var war=parseInt(window.innerWidth)/parseInt(imgTloBlok_nr1.width);
var wys=Math.floor(parseInt(imgTloBlok_nr1.height)*war);
can.height = wys;
ctx.drawImage(imgTloBlok_nr1, 0, 0, can.width, can.height);
$("#blok_nr1").css('height',can.height+"px");
$("#blok_nr1").css('width',can.width+"px");
$("#blok_nr1").css("backgroundImage","url("+can.toDataURL('image/jpeg')+")");
var imgTloBlok_nr1 = new Image(1920,876);
imgTloBlok_nr1.src = 'images/bkg-blok-nr1-v2.jpg';
imgTloBlok_nr1.onload=new function(){
$('html,body').append('<canvas id="bkdb1" style="display:none"></canvas>');
var can = document.getElementById('bkdb1');
var ctx = can.getContext('2d');
can.width = window.innerWidth;
var war=parseInt(window.innerWidth)/parseInt(imgTloBlok_nr1.width);
var wys=Math.floor(parseInt(imgTloBlok_nr1.height)*war);
can.height = wys;
ctx.drawImage(imgTloBlok_nr1, 0, 0, can.width, can.height);
$("#blok_nr1").css('height',can.height+"px");
$("#blok_nr1").css('width',can.width+"px");
$("#blok_nr1").css("backgroundImage","url("+can.toDataURL('image/jpeg')+")");