Fix unwanted caching in IE8

This commit is contained in:
kondou 2013-09-03 18:34:40 +02:00
parent 4724d60ecd
commit 6d42f51d0c
2 changed files with 20 additions and 7 deletions

View file

@ -15,7 +15,7 @@
* You may use this on any <div></div> * You may use this on any <div></div>
* Here I'm using <div class="avatardiv"></div> as an example. * Here I'm using <div class="avatardiv"></div> as an example.
* *
* There are 3 ways to call this: * There are 4 ways to call this:
* *
* 1. $('.avatardiv').avatar('jdoe', 128); * 1. $('.avatardiv').avatar('jdoe', 128);
* This will make the div to jdoe's fitting avatar, with the size of 128px. * This will make the div to jdoe's fitting avatar, with the size of 128px.
@ -30,10 +30,14 @@
* This will search the DOM for 'user' data, to use as the username. If there * This will search the DOM for 'user' data, to use as the username. If there
* is no username available it will default to a placeholder with the value of * is no username available it will default to a placeholder with the value of
* "x". The size will be determined the same way, as the second example did. * "x". The size will be determined the same way, as the second example did.
*
* 4. $('.avatardiv').avatar('jdoe', 128, true);
* This will behave like the first example, except it will also append random
* hashes to the custom avatar images, to force image reloading in IE8.
*/ */
(function ($) { (function ($) {
$.fn.avatar = function(user, size) { $.fn.avatar = function(user, size, ie8fix) {
if (typeof(size) === 'undefined') { if (typeof(size) === 'undefined') {
if (this.height() > 0) { if (this.height() > 0) {
size = this.height(); size = this.height();
@ -67,7 +71,11 @@
if (typeof(result) === 'object') { if (typeof(result) === 'object') {
$div.placeholder(result.user); $div.placeholder(result.user);
} else { } else {
$div.html('<img src="'+url+'">'); if (ie8fix === true) {
$div.html('<img src="'+url+'#'+Math.floor(Math.random()*1000)+'">');
} else {
$div.html('<img src="'+url+'">');
}
} }
}); });
}); });

View file

@ -50,15 +50,15 @@ function selectAvatar (path) {
} }
function updateAvatar () { function updateAvatar () {
$('header .avatardiv').avatar(OC.currentUser, 32); $('#header .avatardiv').avatar(OC.currentUser, 32, true);
$('#avatar .avatardiv').avatar(OC.currentUser, 128); $('#displayavatar .avatardiv').avatar(OC.currentUser, 128, true);
} }
function showAvatarCropper() { function showAvatarCropper() {
$cropper = $('#cropper'); $cropper = $('#cropper');
$cropperImage = $('#cropper img'); $cropperImage = $('#cropper img');
$cropperImage.attr('src', OC.Router.generate('core_avatar_get_tmp')); $cropperImage.attr('src', OC.Router.generate('core_avatar_get_tmp')+'#'+Math.floor(Math.random()*1000));
// Looks weird, but on('load', ...) doesn't work in IE8 // Looks weird, but on('load', ...) doesn't work in IE8
$cropperImage.ready(function(){ $cropperImage.ready(function(){
@ -77,8 +77,11 @@ function showAvatarCropper() {
} }
function sendCropData() { function sendCropData() {
$cropper = $('#cropper');
$('#displayavatar').show(); $('#displayavatar').show();
$cropper.hide(); $cropper.hide();
$('.jcrop-holder').remove();
$('#cropper img').removeData('Jcrop').removeAttr('style').removeAttr('src');
var cropperdata = $('#cropper').data(); var cropperdata = $('#cropper').data();
var data = { var data = {
@ -220,7 +223,9 @@ $(document).ready(function(){
$('#abortcropperbutton').click(function(){ $('#abortcropperbutton').click(function(){
$('#displayavatar').show(); $('#displayavatar').show();
$cropper.hide(); $('#cropper').hide();
$('.jcrop-holder').remove();
$('#cropper img').removeData('Jcrop').removeAttr('style').removeAttr('src');
}); });
$('#sendcropperbutton').click(function(){ $('#sendcropperbutton').click(function(){