javascript - Force browser to ignore cache -


my code crops photo. cropped photo replaced browser ever loads first crop. have scoured web nothing has worked. have added random strings php - new.jpg?time=t - prevents cropped image saving. have included

<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> 

but browser still loads cache. html javascript , php follow. other suggestions?

                <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"); 

you have following choices: - add following meta tag, force not cash

<meta http-equiv="pragma" content="no-cache" /> have see 
  • moreover, if want load new version of css file, following

< link rel="stylesheet" type="text/css" href="mystyle.css?version={newversiononrequierd}">

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

Comments

Popular posts from this blog

how to proxy from https to http with lighttpd -

android - Automated my builds -

python - Flask migration error -