Обработка нескольких откатов изображений в Javascript - PullRequest
Новая
       7

Обработка нескольких откатов изображений в Javascript

0 голосов
/ 08 сентября 2018

Есть ли способ обработать несколько откатов изображений в простом Javascript или в React?

Я знаю, что мы можем обработать одно резервное изображение с помощью onError(). Что, если мы хотим создать другое резервное изображение?

Заранее спасибо!

1 Ответ

0 голосов
/ 08 сентября 2018

Обратный вызов изображения будет вызываться каждый раз, когда вы устанавливаете src, вызывающий ошибку.

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

var fallbacks = ["1.jpg","2.jpg","https://placebear.com/g/100/100","4.jpg"];
var image = new Image;
image.dataset["fallback"] = 0;
image.onerror = function(){
  console.log("onerror triggered");
  var fallbackIndex = this.dataset["fallback"];

  //check to see if we exhausted the fallbacks
  if(fallbackIndex > fallbacks.length-1) return;

  //set the fallback image
  this.src = fallbacks[fallbackIndex];

  //increment the index incase onerror is called again
  image.dataset["fallback"]++;
}

document.body.appendChild(image);
image.src = "doesntexist.jpg";

Обратите внимание, что вам не нужно сохранять запасные варианты в javascript. Вы можете поместить запасные значения в атрибут данных на самом элементе и получить его через свойство набора данных 

document.querySelector("img").addEventListener("error",function(){
  var fallbackIndex = this.dataset["fallback"];
  var fallbacks = this.dataset["fallbacks"].split(",");
  
  if(fallbackIndex > fallbacks.length-1) return;
  this.src = fallbacks[fallbackIndex];
  this.dataset["fallback"]++;
});
<img src="" data-fallback="0" data-fallbacks="1.jpg,2.jpg,https://placebear.com/g/100/100,4.jpg" />

Для реакции вы, в основном, делаете то же самое, но с помощью их синтаксиса, full demo 

class ImageWithFallbacks extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      src: props.src,
      fallbackIndex: 0
    }
    this.props.fallbacks = this.props.fallbacks.split(",");
  }
  onError() {
    console.log("errored",this.state.fallbackIndex);
    if(this.state.fallbackIndex > this.props.fallbacks.length){
       return;
    }
    this.setState({
      src: this.props.fallbacks[this.state.fallbackIndex],
      fallbackIndex: this.state.fallbackIndex+1
    });
  }
  render() {
    return <img src={this.state.src} onError={()=>this.onError()} />;
  }
}

<ImageWithFallbacks src="nonexistent.jpg" fallbacks="1.jpg,2.jpg,https://placebear.com/g/100/100,4.jpg" />
...