tiene - obtener valor de un boton jquery

Cambiar un atributo de fuente de imagen con jQuery no siempre se aplica en Chrome/Opera

Question

Tengo el siguiente código que se usa para recuperar una pequeña porción de alta resolución de una foto en mi sitio web. La idea es permitir que las personas vean la calidad del original antes de decidir si comprar o no:

$(''#magviewplus'').attr(''src'', ''/photos/original-snippet.php?id=<?php echo $nID?>&x=''+left+''&y=''+top).load(function() {
    window.clearInterval(maginterval);
    magtimer=3;
    maginterval=window.setInterval(magViewCountdown,1000);
    $(''#clicktoenhance'').html(''Exiting in ''+magtimer+''s...'');
});

Por alguna razón, es intermitente. Fiddler muestra que el fragmento de código siempre está cargado, pero solo se muestra a veces. Sin embargo, incluso cuando no se muestra, el código en el evento load () funciona bien.

Así que piensa que está cargado, Fiddler muestra que está cargado, pero aproximadamente el 50% del tiempo no muestra dónde debería estar.

Tiende a ocurrir menos en mi escritorio en casa, y más en mi computadora portátil cuando estoy fuera de casa, así que me pregunto si de alguna manera está relacionado con que el recurso sea un poco lento de carga a veces ...

¿Algunas ideas?

edición: esto parece estar limitado a Chrome & Opera, funciona bien en Firefox / IE11

Answer 1

El problema puede estar relacionado con la política de almacenamiento en caché de recursos del cliente que depende del navegador y su configuración. Si es así, puede forzar la recarga de la imagen agregando un número aleatorio como parámetro a la cadena de dirección. Desde el punto de vista del servidor, este parámetro no tiene sentido, pero para el navegador lo ve como un recurso completamente nuevo, incluso en realidad es el mismo. El siguiente ejemplo ilustra este método:

$(''#loadbtn'').click(function(){
  $(''#msg'').html("loading...");
  $(''#myimg'').attr("src", "http://cache1.asset-cache.net/xt/165920320.jpg?v=1&g=fs1%7C0%7CISI%7C20%7C320&s=1" + 
    "&rnd=" + Math.random());
});

$(''#myimg'').load(function(){
  $(''#msg'').html("loaded");
});

#loadbtn {
  margin: 16px;
}
#msg {
  margin: 16px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id=''myimg'' src=''http://cache1.asset-cache.net/xt/165920320.jpg?v=1&g=fs1%7C0%7CISI%7C20%7C320&s=1'' />
<div>
  <input type=button id=''loadbtn'' value=''reload'' />
</div>
<div id=''msg''>loading...</div>

Answer 2

Intente poner la propiedad "name" en la etiqueta con el mismo valor que la propiedad "id".

<id="magviewplus" name="magviewplus".../>

De esta manera, jquery incluso en Chrome detecta el atributo y cambia correctamente, en la versión más antigua de jquery que ignoro si esto funciona, espero que esta ayuda.

Answer 3

Parece que su problema está bien documentado, como se desprende de las siguientes publicaciones:

1. jquery callback en carga de imagen al cambiar el src

2. Capturando eventos de carga para imágenes cambiando dinámicamente su fuente.

3. Devolución de llamada jQuery en carga de imagen (incluso cuando la imagen está almacenada en caché)

Le sugiero que cargue una nueva imagen en la memoria, luego, cuando se dispare el evento de carga de esta nueva imagen, cambie el src de la imagen real y haga lo que sea necesario. La imagen original permanece intacta y cualquier otro evento (aparte de la carga) adjunto a ella debe permanecer intacto:

$(new Image()).attr(''src'', ''/photos/original-snippet.php?id=<?php echo $nID?>&x='' + left + ''&y='' + top).load(function() {
    $(''#magviewplus'').attr(''src'', this.src);
    window.clearInterval(maginterval);
    magtimer = 3;
    maginterval = window.setInterval(magViewCountdown,1000);
    $(''#clicktoenhance'').html(''Exiting in '' + magtimer + ''s...'');
});

DEMO

Answer 4

Puedes usar el evento Image onload .

Este controlador de eventos se llamará en el elemento de imagen cuando la imagen haya terminado de cargarse.

Código

var url = ''/photos/original-snippet.php?id=<?php echo $nID?>&x=''+left+''&y=''+top;

var img = new Image();

img.onload = function () { 
    //When load''s sucessfully
    $(''#magviewplus'').prop(''src'', url); 

    window.clearInterval(maginterval);
    magtimer=3;
    maginterval=window.setInterval(magViewCountdown,1000);
    $(''#clicktoenhance'').html(''Exiting in ''+magtimer+''s...'');
};

img.onerror = function () { 
    //When load''s fails
}; 

img.src = url; //Set URL

Answer 5

Use .load () para cargar la imagen:

$(''#magviewplus'').load(''/photos/original-snippet.php?id=<?php echo $nID?>&x=''+left+''&y=''+top, function() {
    window.clearInterval(maginterval);
    magtimer=3;
    maginterval=window.setInterval(magViewCountdown,1000);
    $(''#clicktoenhance'').html(''Exiting in ''+magtimer+''s...'');
});

Answer 6

editado para mostrar que esto no funciona ...

Al principio pareció que una "solución" pragmática era eliminar y volver a agregar la imagen:

<div id="magviewholder"><img id="magviewplus" src="pixel.gif" alt=""></div>

Al igual que:

$(''#magviewholder'').children("img").remove()
$(''#magviewholder'').append(''<img>'');

$(''#magviewholder>img'').attr(''onerror'',''imgError(this)'').attr(''id'',''magviewplus'').attr(''src'', ''/photos/original-snippet.php?id=<?php echo $nID?>&x=''+left+''&y=''+top).load(function() {
     window.clearInterval(maginterval);
     magtimer=3;
     maginterval=window.setInterval(magViewCountdown,1000);
     $(''#clicktoenhance'').html(''Exiting in ''+magtimer+''s...'');
 });

Esto pareció funcionar en todos los navegadores al principio, pero ahora parece ser tan intermitente ...