強制瀏覽器忽略緩存

Question

我的代碼裁剪了一張照片。 裁剪的照片會不斷更換，但瀏覽器只會加載第一個裁剪。 我在網上搜索過，但沒有任何效果。 我已將隨機字符串添加到php - new.jpg?time=t - 但這可以防止裁剪的圖像被保存。 我已經包括在內

<head>   
    <meta charset="utf-8">   
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="-1" />
</head>

但瀏覽器仍然從緩存加載。 HTML JavaScript和PHP如下。 還有其他建議嗎？

                <html>
                <head>
                    <title>Image Crop</title>
                    <style>
                        body{
                            margin: 0;
                            padding: 0;
                        }
                        #container{
                            width: 300px;
                        }
                        #box{
                            position: absolute;
                            top: 0px;
                            left: 0px;
                            width: 100px;
                            height: 100px;
                            background: white;
                            border: 2px solid blue;
                            opacity: 0.5;
                        }
                        #crop_button{
                            background: #333;
                            color: #fff;
                            padding: 5px;
                            border: 0px;
                            margin: 5px;
                        }
                        #output{
                            position: absolute;
                            top: 0px;
                            left: 300px;
                        }
                    </style>
                </head>
                <body>
                    <div id="container">
                        <img src="resized_IMG0934.jpg"/>
                        <div id="box"></div>
                    </div>
                    <div id="output"><image />
                    </div>
                    <button id="crop_button">Crop</button>
                    <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
                    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
                    <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
                    <script src="index.js"></script>
                </body>
            </html>

                 $(function() {
                $('#box').draggable({containment: '#container'});
                $('#box').resizable({containment: '#container'});
                $('#crop_button').click(function(){ 
                    var top = $('#box').position().top;
                    var left = $('#box').position().left;
                    var width = $('#box').width();
                    var height = $('#box').height();
                    $.post('crop.php', {top:top, left:left, width:width, height:height}, function(){
                        $('#output').html('<img src="new.jpg"/>');
                    });
                });
             });

                <?php
            $dst_x = 0;
            $dst_y = 0;
            $src_x = $_POST['left'];  //crop Start x
            $src_y = $_POST['top'];  //crop Start y
            $dst_w = $_POST['width']; //Thumb width
            $dst_h = $_POST['height']; //Thumb height
            $src_w = $_POST['width'];  //$src_w + $dst_w
            $src_h = $_POST['height'];  //$src_h + $dst_h

            $dst_image = imagecreatetruecolor($dst_w,$dst_h);
            $src_image = imagecreatefromjpeg("resized_IMG0934.jpg");
            imagecopyresampled($dst_image, $src_image, $dst_x, $dst_y, $src_x, $src_y, $dst_w, $dst_h, $src_w, $src_h);
            imagejpeg($dst_image, "new.jpg");

Answer 1

您有以下選擇： - 添加以下元標記，這將強制不緩存

 <meta http-equiv="pragma" content="no-cache" /> which you have already as I see

此外，如果要加載新版本的css文件，請執行以下操作

<link rel =“stylesheet”type =“text / css”href =“mystyle.css？version = {NewVersionOnRequierd}”>

同樣的圖像

 < img src="picture.jpg?123" alt="">

Answer 2

創建一個隱藏的iframe並將其src設置為圖像URL，如下所示：

function refresh(url){
    var iframe = document.createElement('iframe')
    iframe.src = url
}

Answer 3

好吧，我最終通過在圖像元素源中附加一個隨機字符串來解決問題，正如我多次嘗試過的那樣。 我的Firefox安裝似乎有問題。 很難得出任何結論。 感謝您的貢獻。

強制瀏覽器忽略緩存

問題描述

3 個解決方案

解決方案1
2 2014-05-19 09:23:16

解決方案2
1

解決方案3
0 2014-05-21 12:18:26

強制瀏覽器忽略緩存

問題描述

3 個解決方案

解決方案1 2 2014-05-19 09:23:16

解決方案2 1

解決方案3 0 2014-05-21 12:18:26

解決方案1
2 2014-05-19 09:23:16

解決方案2
1

解決方案3
0 2014-05-21 12:18:26