Изображения не загружаются должным образом

Question

Я занимаюсь разработкой приложения HTML и js, которое будет работать на устройствах IOS.В этом приложении я использую много изображений и использую src, чтобы установить путь к этим изображениям внутри функции.После завершения этой функции я вызываю другую функцию, где рисую холст, проблема в том, что все эти изображения не загружаются должным образом, часть ширины изображений остается равной 0. Как я могу убедиться, что все изображения загружаются правильно, прежде чем явызовите следующую функцию.

Спасибо

Answer 1

Это обеспечит загрузку всех ваших изображений

var images = [{src: "foo.jpg"},{...}];
var loaded = 0;
function loadImages(){
  for(var i=0;i<images.length;++i){
  var tmp = new Image;
  tmp.onload = function(){loaded++;if(loaded == images.length){nextStep();}};
  tmp.src = images[i].src;
}

function nextStep(){
  console.log("everything loaded");
}

loadImages();

Answer 2

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

Ожидание завершения загрузки изображений легко:

var img = new Image();   // Create new img element
img.onload = function(){
  // execute drawImage statements here
};
img.src = 'myImage.png'; // Set source path

Убедитесь, что событие onload сработало для каждого изображения, прежде чем пытатьсярисовать. Если у вас есть несколько изображений и вы не хотите что-то усложнять, то есть библиотеки, которые делают это для вас, например pxloader .

Answer 3

вы можете использовать событие загрузки изображения для запуска кода, запускаемого, когда изображение полностью загружено; Ниже приведен пример. Код в обработчике, прикрепленном к image.onload, запускается, когда изображение полностью загружается где-то после того, как я установил image.src.

var p = {    
    display: function(imageUrl) {
        var availableDimensions = this.getAvailableDimensions();
        $("#loadingImg").css("display", "none");
        var canvas = document.getElementById("myCanvas");
        var image = new Image();
        image.onload = function() {
            canvas.width = image.width;
            canvas.height = image.height;
            canvas.getContext("2d").drawImage(image, 0, 0, image.width, image.height);
            canvas.style.display = "inline";
        };
        image.src = imageUrl + "&width=" + availableDimensions.width + "&height=" + availableDimensions.height + "&negative=false";
    }
}