Question

i am working on a website that has a set of images and 1st image is like an avatar.. when i want to change the avatar (1st picture) what i do is i swap the 1st image name with the new image that i want to use as avatar. I do this on an ajax function so i dont need to refresh the page after i do that.

rename("C:/wamp/www/invest/Coded/oferte/" . $offer_id . "/" . $pic_name, "C:/wamp/www/invest/Coded/oferte/" . $offer_id . "/" . $temp_name);
rename("C:/wamp/www/invest/Coded/oferte/" . $offer_id . "/" . $avafile, "C:/wamp/www/invest/Coded/oferte/" . $offer_id . "/" . $pic_name);
rename("C:/wamp/www/invest/Coded/oferte/" . $offer_id . "/" . $temp_name, "C:/wamp/www/invest/Coded/oferte/" . $offer_id . "/" . $avafile);

My problem is after i do that, i delete the images from the div and i add them again in the new order, but i think the browser saves the images somewhere and dont reload them and they appear in same order. Only after i refresh the page, they appear in the right order. Is there like a solution to make the browser upload the images again ?

Thank you in advance, Daniel!

EDIT: This is the ajax function:

function avaPic(offer_id, pic_name, onFinish) {
    var request;
    if(window.XMLHttpRequest)
        request = new XMLHttpRequest();
     else
        request = new ActiveXObject("Microsoft.XMLHTTP");

    request.onreadystatechange = function() {
        if (request.readyState == 4 && request.status == 200) {
            onFinish();
        }
    }

    request.open("GET", "php/script.php?action=avaPic&offer_id=" + offer_id + "&pic_name=" + pic_name, true);
    request.setRequestHeader("If-Modified-Since", "Sat, 1 Jan 2000 00:00:00 GMT");
    request.send();
}

The php:

if($action == "avaPic") {
        $offer_id = $_GET["offer_id"];
        $pic_name = $_GET["pic_name"];
        $filearray = getDirectoryList("C:/wamp/www/invest/Coded/oferte/" . $offer_id . "/");
        $avafile = $filearray[0];
        $temp_name = "temp.jpg";

        rename("C:/wamp/www/invest/Coded/oferte/" . $offer_id . "/" . $pic_name, "C:/wamp/www/invest/Coded/oferte/" . $offer_id . "/" . $temp_name);
        rename("C:/wamp/www/invest/Coded/oferte/" . $offer_id . "/" . $avafile, "C:/wamp/www/invest/Coded/oferte/" . $offer_id . "/" . $pic_name);
        rename("C:/wamp/www/invest/Coded/oferte/" . $offer_id . "/" . $temp_name, "C:/wamp/www/invest/Coded/oferte/" . $offer_id . "/" . $avafile);
    }

在Finish功能上,一是重新播下这些图像,希望这些图像在新秩序中重新排列,但似乎与以前一样,直到一整页。

I found it, how to force the browser reload the images.

<div>
       <img src="img1.jpg" />
       <img src="img2.jpg" />
       <img src="img3.jpg" />
</div>

相反,我必须产生一个有时间参数的《html法典》,以便浏览器重载图像。参见:<img src=“img1.jpg?” + d.gettime()/>。

Answer 1

Check will this solved your issue, If you have your HTML like this,

        <div>
           <img src="abc.jpg" />
           <img src="abc.jpg" />
           <img src="abc.jpg" />
        </div>

Just run this jquery after your ajax call

        $( div img ).attr("src",$( img ).attr("src")+"?+"Math.random())

友情链接