Tengo un formulario para cargar una imagen de icono de perfil. Una vez que la carga se completa con éxito en AJAX, tomo la nueva ruta de la imagen y muestro la imagen. Funciona bien, sin embargo, si utilicé el script varias veces sin actualizar la página, la nueva imagen devuelta parpadea varias veces después de cargarse dinámicamente. (Ver animación gif).

Este "parpadeo" repetido de la imagen devuelta parece aumentar si sigo usando el script sin actualizar la página. Entonces, supongo que estoy haciendo algo mal aquí. ¿Falta algo para evitar que el evento continúe disparándose? Además, si encuentro un error, la alerta de error también se activa/repite muchas veces.

 $('#image_icon').change(function() { $('#icon_upload_form').submit(); }); $('#icon_upload_form').on('submit',(function(e) { var icon_loader = $(".icon_loader").show(); e.preventDefault(); e.stopPropagation(); var formData = new FormData(this); $.ajax({ type:'POST', url: '../process/process_icon_upload.php', data:formData, cache:false, contentType: false, processData: false, dataType : "json", success:function(data){ icon_loader.hide(); if (data.error > 0) { alert(data.msg) } else if (data.error == 0) { $("#save_map_icon").fadeIn("fast"); $("#new_map_icon").css({"background-image":"url('../images_icons_tmp/"+data.filename+"')"}) } return false; }, error: function(data){ alert("Error - "+JSON.stringify(data)) console.log("error"); console.log(data); return false; } }); }) )