Usar método .load() para carregar imagens externas

[Robson Barros da Rocha 0]

Boa noite!

 

Amigos, eu gostaria de saber como posso carregar uma imagem de um site externo para meu site. Exemplo, tenho em meu site o seguinte ID:

<table><tr><td id="result_img"></td></tr></table>

O que queria saber é se com o jQuery a seguir eu consigo puxar a imagem do tal site, para este dentro do código <td id="result_img">, e que este jQuery crie uma tag <img src="" /> na minha página já com a URL do site externo.

 

Eu comecei a criar, mas parei porque não sei o código a ser usado.

jQuery(document).ready(function(){
        $( "#result_img" ).load( "http://sitexemplo.com.br/ .image-theme .img-responsive" );

  });

O negócio é que nesta minha página eu gostaria que o jQuery criasse a tag IMG, e não que já houvesse uma tag IMG com o ID específico.

 

Obrigado pela ajuda.

[Renan Vinicius 0]

Tenta isso no jQuery.

jQuery(document).ready(function(){

  $("#result_img").html('<img src="" />');

  $("#result_img img").load("http://sitexemplo.com.br/imagem.jpg");

});

Caso precise atualizar constantemente use o setinterval

[Robson Barros da Rocha 0]

Bom dia amigo, obrigado pela resposta.

 

Lendo o seu script eu percebi que ele cria uma tag <img> como eu bem disse e queria, mas, usando o método .load() eu consigo por exemplo, postar a URL do link, e o Load capturar a URL e exibir a imagem?

 

 

Alguém saberia?

[Gabriel Heming 766]

Eu sugiro uma solução sem jQuery usando apenas javascript:

 

Na realidade, eu possuia esse código pronto, para carregamento prévio de imagens, pra não demorar na hora do cliente clicar em exibir imagem.

O preLoadImage realiza o pré carregamento da imagem em background.

/**
Como exemplo básico, utilizo uma variável global
O mais recomendado seria encapsular em uma classe de gerenciamento
**/
var images = Array();
 
function preLoadImage(index , img) {
    image = new Image();
    image.src = img;
    images.push(image);
    return false;
}

O parâmetro index do preLoadImage é para orientação a qual imagem você gostaria de carregar no loadImage. Como é utilizado um vetor, o index deve ser numérico

O loadImage, insere a imagem pré carregada, então não há espera de load pela imagem, uma vez que ela já está carregada em background.

function loadImage(element , index , isImageTag) {
    if(isImageTag) {
        element.setAttribute('src' , images[index].src);  
    } else {
        return element.appendChild(images[index]);
    }
    
    return false;
}

Como parâmetro, você deve passar o elemento no qual você quer inserir a imagem (pode ser usado this, getElementById, etc..), o index dela utilizado no preLoadImage e especificar se o elemento é ou não uma imagem.
Caso for um elemento IMG, apenas adicionará o SRC. Caso contrário, criará a tag IMG.

Exemplo de uso:
HTML:

<div id="cabecalho"></div>

JS:

preLoadImage(0 ,'image.jpeg');
loadImage(document.getElementById('idDoElemento') , 0 , true);

Resultado:

<div id="idDoElemento"><img src="image.jpg" /></div>