Загрузчик изображений JavaScript: методы загрузки изображений с использованием JavaScript

  1. Собственный объект изображения JavaScript:

    var img = new Image();
    img.onload = function() {
       // Image loaded successfully
    };
    img.onerror = function() {
       // Error loading image
    };
    img.src = "path/to/image.jpg";
  2. jQuery:

    $("<img />").attr("src", "path/to/image.jpg").load(function() {
       // Image loaded successfully
    }).error(function() {
       // Error loading image
    });
  3. Обещания JavaScript:

    function loadImage(url) {
       return new Promise(function(resolve, reject) {
           var img = new Image();
           img.onload = function() {
               resolve(img);
           };
           img.onerror = function() {
               reject(new Error('Error loading image.'));
           };
           img.src = url;
       });
    }
    // Usage
    loadImage("path/to/image.jpg").then(function(img) {
       // Image loaded successfully
    }).catch(function(error) {
       // Error loading image
    });
  4. Тег HTML5 с атрибутами onloadи onerror:

    <img src="path/to/image.jpg" onload="console.log('Image loaded.')" onerror="console.log('Error loading image.')">