2010-06-26 4 views
1

Je veux charger l'image du serveur Web sans actualiser la page. J'ai la page simple: make AJAX jQuery JavaScript charge des images?

<body><h1>Test</h1> 
     <div id="mydiv"> 
     <img src="animals.jpg"/> 
     </div> 
</body> 
</html> 

point est que les changements de contenu animals.jpg (ie maintenant animals.jpg peut être l'image du loup, mais après minute, il sera remplacé par un chat) mais le nom (animal.jpg) reste (le serveur écrase le contenu de l'image seulement) alors ce que je veux, c'est quand je clique sur l'image, il va le recharger à partir du serveur.

ce que je l'ai fait jusqu'à présent (en fait, il est fait de morceaux d'exemples i :)) trouvés:

$(document).ready(function(){ 
     $('#mydiv').click(function(){ 
     //$('#mydiv').load("animals.jpg") // loads text instead of image 
     //$("#mydiv").append("<img src='animals.jpg'/>"); // appends old picture 
     //$("#mydiv").html("<img src='animals.jpg'/>") // not responds at all 
    }); 
}) 

ne fonctionne pas, voir les commentaires.

Bien que je peux charger des années html:
loadme.html:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"/></script> 
<script type="text/javascript"> 
    $(document).ready(function(){ 
    $('#mydiv').click(function(){ 
    $('#mydiv').load("h1.html") 
    }); 
}) 


</script> 

</head> 

<body><h1>Test</h1> 
<div id="mydiv"> 
load me! 
</div> 
</body> 
</html> 

h1.html:

Texte


maintenant, quand je change h1.html « texte 'sur quelque chose d'autre et je clique sur' charger moi! ' dans load.html il mettra toujours à jour le contenu. C'est ce que je veux obtenir des images:/

Répondre

1

Vous devez modifier l'attribut src de l'image pour le recharger. Comme le src est censé rester le même, ajoutez une chaîne aléatoire à la fin de celui-ci. Cela fera penser au navigateur qu'il s'agit d'une nouvelle image.

$('#mydif>img').attr('src', 'animals.jpg?random=' + Math.random()); 
+0

Merci, ça marche enfin! $ ('img'). Attr ('src', 'animals.jpg? Random =' + Math.random()); (avec une petite modification) – vladimirze

-1

manière la plus simple, pour moi:

<img id="myimg" src="animal.jpg"/> 

mis en place l'attribut src avec Javascript:

function f() 
{ 
    var img = document.getElementById("myimg"); 
    img.src = "your_new_pic.jpg"; 
} 

Bien sûr, si vous avez besoin d'animations ou d'autres trucs sympas, il vaut mieux utiliser JQUERY.

+0

Ne pensez pas que vous avez compris la question. Il cherche un moyen d'obtenir JavaScript pour ** recharger ** une image (cachebusting). – ceejayoz