Jeśli mam obraz na stronie, który chcę przejść z jednego elementu do innego, Firefox i Internet Explorer po prostu ruchy obraz, podczas gdy Chrome faktycznie ponownie podnosi Źródło obrazu dla treści. Jak mogę zmusić Chrome, aby nie ponownie pingować źródła, ale tylko przenieś obraz z jednego pojemnika do drugiego?

Mogę to potwierdzić, ustawiając źródło obrazu do sterownika ASP.NET MVC i ustawić punkt przerwania, aby zobaczyć, kiedy zostanie zażądany. Oto przykład:

Kontroler MVC:

using System.Drawing;
using System.Drawing.Imaging;
using System.IO;
using System.Web.Mvc;

namespace Web.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }
        public ActionResult ImgController()
        {
            // Set breakpoint in this controller
            Image i = Image.FromFile(@"C:\img.png");
            MemoryStream ms = new MemoryStream();
            i.Save(ms, ImageFormat.Png);
            return new FileContentResult(ms.ToArray(), "Image");
        }
    }
}

Widok:

@{ ViewBag.Title = "Index"; }
<img src="Home/ImgController" />
<div></div>
<script type="text/javascript">
    setTimeout(function () {
        document.getElementsByTagName("div")[0].innerHTML = document.getElementsByTagName("img")[0].outerHTML;
    }, 5000);
</script>

Gdy strona początkowo ładuje punkt przerwania w sterowniku ImgController jest trafiony, którego oczekuje się. Ale gdy funkcja JavaScript {{X1} jest wykonywana po 5 sekundach, punkt przerwania w ImgController jest trafiony drugi raz tylko w Chrome . W Firefoksie i Internet Explorer Punkt przerwania nigdy nie trafia, ponieważ po prostu przesuwa element.

Próbowałem też appendChild i jQuery's .html(), oba mają ten sam wynik.

Jak mogę zmusić Chrome do korzystania z elementu, który ma już w Domu zamiast ponownie pingować serwer do powtarzania treści?

2
BenR 27 listopad 2013, 21:52

2 odpowiedzi

Najlepsza odpowiedź

Udało mi się znaleźć rezolucję, na wypadek, gdyby ktoś przejdzie z tym samym problemem.

Znalazłem, jeśli zadeklaruję wizerunek jako globalny o zmiennym JavaScript Chrome nie ponowne zapytanie serwera. Oto przykład:

@{ ViewBag.Title = "Index"; }
<div></div>
<script type="text/javascript">
    window.tmpImg = new Image();
    tmpImg.src = "Home/ImgController";
    document.getElementsByTagName("body")[0].appendChild(tmpImg);
    setTimeout(function () {
        document.getElementsByTagName("div")[0].appendChild(tmpImg);
    }, 5000);
</script>
1
BenR 2 grudzień 2013, 23:46

Punkt przerwania prawdopodobnie pojawia się żądanie, co powróci 304 (nie modyfikowane), co faktycznie nie przekazuje obrazu po raz drugi. Lepiej patrząc na panel sieciowy przeglądarki w debuggerze i patrząc na to, co przechodzi przez drut, a nie wydarzenie w swojej aplikacji.

Dlaczego

0
Diodeus - James MacFarlane 27 listopad 2013, 18:06