0

Tenho o seguinte código:

<table class="table" id="historico">
  <thead>
    <tr>
      <th>Hora</th>
      <th>Música</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

E o script:

setInterval(function() {

$.ajax({
  url: 'http://cors.io/?http://somdomato.com:8000/played',
  type:'GET',
  success: function(retorno){
    var html = "";
    $("<table>").html(retorno).find('tr').slice(3).each(function () {
      var arrayColuna = [];
      $(this).find('td').each(function () {
        arrayColuna.push("<td>" + $(this).text() + "</td>");
      });
      html += "<tr>" + arrayColuna.slice(0,2) + "</tr>";
    });
    $("#historico > tbody").html(html);
  }
});

}, 10000);

Só que isso gera erros no console, por exemplo:

http://localhost/user/lucas/teste/images/history.png Failed to load resource: the server responded with a status of 404 (Not Found)

Como evitar isso?

3
  • tem certeza que sua url ta correta? Nao faz muito sentido ter um http dentro de outro http, as vezes isso que ta causando o erro
    – leofontes
    Commented 26/11/2016 às 15:35
  • Está, o cors.io é porque eu não consigo fazer um parse da minha máquina local, apenas no servidor, quando estiver em produção eu tiro esse cors.io, o script funciona normal, porem o erro é exibido no console. Entendeu? Commented 26/11/2016 às 22:41
  • @leofontes olha o código funcionando: i.imgur.com/OpHR7LN.png Commented 26/11/2016 às 23:01

1 Resposta 1

1

Deu este erro por que sua imagem não foi encontrada, verifique se esta colocando o caminho certo.

Algo que você pode fazer é verificar se a imagem existe e caso não exista você exibe uma mensagem de imagem não disponível, exemplo:

$('img[data-src]').each(function() {
  var self = $(this);

  self.attr('alt', "Carregando...");
  
  var src = self.attr('data-src');

  var img = new Image();

  img.onload = function() {
    self.attr('src', src);
    self.attr('alt', "");
  }
  img.onerror = function() {
    self.attr('alt', "Imagem não encontrada");
  }
  img.src = src;

});
img {
  width: 200px;
  height: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<img data-src="path/invalido/img.png" />

<img data-src="http://www.generalpepper.com.br/wp-content/uploads/2013/08/bacon1.jpg" />

O atributo data-src é só para deixar o src na tag sem que seja carregado por default e que tenha uma sintaxe no padrão HTML5.

No Jquery estou criando uma Image que representa a tag <img />, nela eu boto um callback no onload para quando fizer o load da imagem colocar o valor do data-src no src da <img /> para carregar a imagem normalmente e um callback no onerror para quando a imagem não for encontrada colocar no alt da <img /> uma mensagem de "Não encontrado".

É necessário definir uma altura e largura minima pra imagem se não a mensagem do alt não aparecem.

1
  • Mas eu não quero carregar a imagem, só a tabela que me importa. Commented 26/11/2016 às 22:37

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .