Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Campão

[Resolvido] Ajax com Jquery

Por , em Javascript

Recommended Posts

Campão    0

Campão
Postado

E ai galera, beleza? Estou com uma duvida, tenho esse codigo em minha pagina:

 

$("#carregando").hide();
$.ajax( {
	type :"GET",
	url :"aparelho.php",
	data :"aparelho=" + id,
	async :false,
	success : function(html) {
	sHtml = html;
	},
});
$("#produto_geral").html(sHtml);

Esse codigo faz parte de uma função que é chamada assim que o usuario clica em um produto!

O codigo procura o ID produto_geral e inser a resposta do AJAX la! Ate ai td bem e td funcionando!

Acontece que a resposta dessa chamada AJAX é uma imagem e meio grandinha, e em alguns casos são varias imagens tb! Ai o DIV carregando sai e a imagem começa a ser baixada pelo navegador!

 

A minha duvida é se eu tenho como controlar o download da imagem feito pelo navegador! para que o DIV carregando sai e em seguida a imagem aparece ja de cara, sem ter que baixar!

 

Valew, abraços!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Campão    0

Campão
Postado

joga o carregando antes de iniciar o ajax, mais dentro da função... está fazendo assim?

 

Fala Ted k', beleza?? Obrigado pela atenação, foi mal, o codigo esta errado, o certo seria assim

 

function mostrarProduto(id)
$("#carregando").show();
$.ajax( {
        type :"GET",
        url :"aparelho.php",
        data :"aparelho=" + id,
        async :false,
        success : function(html) {
        sHtml = html;
        },
});
$("#produto_geral").html(sHtml);
$("#carregando").hide();
}

Mas o problema não é esse, acho q nao conseguir explicar corretamente, o codigo que tenho esta funcionando normalmente!

O meu problema é o seguinte: se o resultado da pagina aparelho.php for textos, beleza, pq o que acontece, o navegador recebe e atualiza na hora, mas se o resultado for imagens (que é o meu caso), o navegador recebe o codigo html (<img src.... bla bla bla), ai assim que o navegador coloca o codigo IMG

success : function(html) {
        sHtml = html;
        },
,

a imagem não aparece, pois nesse momento o navegador faz download da imagem!

 

É isso que eu gostaria de saber, se tem como eu controlar esse download, pois so quando esse download fosse concluido, eu iria mostar a imagem na tela com .show();

 

Sera que deu pra entender?! Desculpa ai se eu compliquei td!

 

Obrigado pela atenção

 

abraços!

Compartilhar este post

Link para o post
Compartilhar em outros sites

raniery    0

raniery
Postado

Ola, implementei uma solução para o seu problema, basta adaptar a sua situação.

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<title>Load IMG</title>
<script type="text/javascript">
    $(function(){
        $('input:submit').click(function(){
            loadImg('http://3.bp.blogspot.com/_S0tciOQWPtE/S9BJu8JpEiI/AAAAAAAAAFE/NCUL53v5vwA/s1600/ubuntu_wallpaper_girl_sexy3.jpg');    
        });
    });

    var carregar;
    function loadImg(img){
        carrega = new Image();
        carrega.src = img;
        $('p').animate({opacity:'0.0'},500, function(){$(this).remove()});
        $('<p>Carregando...</p>').css({border:'1px solid #aaa', background:'#eee', width:'150px', padding:'2px 0 2px 5px', color:'#aaa', font:'tahoma', opacity:'0.0'}).appendTo('body').animate({opacity:1.0},500);
        setTimeout(completeLoad, 100);
    }
    
    function completeLoad(){
        if(carrega.complete){
            $('p').animate({opacity:'0.0'},500, function(){
                $(this).remove();
                $("<p><img src="+carrega.src+" /></p>").css({opacity:0.0}).appendTo('body').animate({opacity:'1.0'},500);
            });
            
        }else{
            setTimeout(completeLoad, 300);
        }
    }
</script>
</head>
<body>
    <input type="submit" value="Carrega Imagem" />
</body>
</html>

Cara, te aconselho a arrumar a forma como o #carregando é exibido:

 

$.ajax(
       {
        type :"GET",
        url :"aparelho.php",
        data :"aparelho=" + id,
        async :false,
        success : function(html) {
            sHtml = html;
        },
        beforeSend:function(){$("#carregando").show()},
        complete:function(){$("#carregando").hide()}
        }
);
$("#produto_geral").html(sHtml);

Compartilhar este post

Link para o post
Compartilhar em outros sites

Campão    0

Campão
Postado

Valew raniery era isso mesmo, demorei para responder, pois demorei para adaptar, mas por fim deu certo

 

Abraços

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito