Модальный режим Sweetalert2 загружается ненадолго, прежде чем изображение появится в модальном окне - PullRequest
Новая
       47

Модальный режим Sweetalert2 загружается ненадолго, прежде чем изображение появится в модальном окне

0 голосов
/ 19 июня 2020

Я использую Sweetalert2 для отображения модального окна с изображением внутри. Хотя он работает нормально, модальное окно без изображения отображается за долю секунды до его появления. Как мне дождаться полной загрузки образа. Вот то, что я пробовал, но не работает: (loadPage вызывается при загрузке страницы.) 

    function loadPage() {
    var img = new Image();
    img.onload = function () { setTimeout(function () { getToast(); }, 5000); }
    img.src = "Images/Save.png";
}

function getToast() {
    const Toast = Swal.mixin({
        toast: false,
        showConfirmButton: true,
        confirmButtonText: 'close',
        timer: 6000,
        imageUrl: 'Images/Save.png',
        timerProgressBar: true,
        title: 'My message.',
    })
    Toast.fire({

    })
}

1 Ответ

1 голос
/ 19 июня 2020

То, как вы это делаете, должно работать без мерцания. Изображение загружается, кэшируется и при последующих запросах должно обслуживаться из кеша. Я создал скрипт и не смог восстановить описанную вами проблему.

Хотя я создал альтернативный подход, сохраняя загруженное изображение как dataURI и передавая его вашему экземпляру SweetAlert. Таким образом вы можете предотвратить случайную загрузку изображения несколько раз. 

function loadPage() {

    var img = new Image();
    img.crossOrigin = 'Anonymous';
    img.onload = function() {
      var canvas = document.createElement('canvas');
      var ctx = canvas.getContext('2d');
      var dataURL;
      canvas.height = this.height;
      canvas.width = this.width;
      ctx.drawImage(this, 0, 0);
      dataURL = canvas.toDataURL('canvas');
      setTimeout(function () { getToast(dataURL); }, 1000);
      canvas = null;
    };
  img.src = 'http://upload.wikimedia.org/wikipedia/commons/4/4a/Logo_2013_Google.png';
}

function getToast(dataURL) {
    const Toast = Swal.mixin({
        toast: false,
        showConfirmButton: true,
        confirmButtonText: 'close',
        timer: 6000,
        imageUrl: dataURL,
        timerProgressBar: true,
        title: 'My message.',
    })
    Toast.fire({

    })
}

loadPage()

Также см. Рабочий пример в прилагаемой скрипте: https://jsfiddle.net/4sza8u2m/

...