Я хотел бы знать, как я могу добавить атрибуты изображения в следующий код. Я добавил функцию teest, чтобы узнать, поддерживает ли браузер пользователей изображение webp, а если нет, он просто показывает изображение jpg вместо webp, но я хочу добавить атрибуты, и ничего из того, что я сделал, не работает.

function hasWebP() {
  var rv = $.Deferred();
  var img = new Image();
  img.onload = function() { rv.resolve(); };
  img.onerror = function() { rv.reject(); };
  img.src = '/images/home/dot.webp';
  return rv.promise();
}
hasWebP().then(function() {
    var img=document.createElement("img");
    img.src="images/home/IMG_4389.webp";
    img.id="picture";
    var foo = document.getElementById("myFace");
    foo.appendChild(img);
}, function() {
    var img=document.createElement("img");
    img.src="images/home/IMG_4389.png";
    img.id="picture2";
    var foo = document.getElementById("myFace");
    foo.appendChild(img);
});
0
Saxo_Broko 21 Апр 2018 в 02:34

1 ответ

Лучший ответ

Я изменил свой код на

function hasWebP() {
  var rv = $.Deferred();
  var img = new Image();
  img.onload = function() { rv.resolve(); };
  img.onerror = function() { rv.reject(); };
  img.src = '/images/home/dot.webp';
  return rv.promise();
}
hasWebP().then(function() {
    document.getElementById("picture").src="/images/home/IMG_4389.webp";
}, function() {
    document.getElementById("picture").src="/images/home/IMG_4389.png";
});

И добавил это в свой html

<img src="" id="picture" draggable="false">
1
Saxo_Broko 17 Авг 2018 в 11:10