Czy można ponownie obliczyć obraz `srcset` użyty przy zmianie rozmiaru okna przeglądarki?

Czy można uzyskać srcset, aby ponownie obliczyć rozmiar okna przeglądarki po załadowaniu strony, a tym samym zaktualizować obraz, którego używa.Czy można ponownie obliczyć obraz `srcset` użyty przy zmianie rozmiaru okna przeglądarki?

Powodem, dla którego chcesz to zrobić, jest to, że jeśli na komputerze masz skompresowane okno przeglądarki, załaduj witrynę, a następnie zwiększ okno przeglądarki, po prostu skaluj "small.jpg" (zgodnie z ustawieniem w numerze srcset), więc użytkownik otrzyma zbuforowany obraz.

Zacząłem robić jsfiddle, aby pokazać problem, ale to dosnt działa dobrze, ponieważ myślę, że srcset jest obliczany przez okno przeglądarki, a nie siatkę wyników jsfiddle.

Jeśli jesteś zainteresowany, możesz skopiować i wkleić poniższy tekst do pustego pliku html i uruchomić go na serwerze lokalnym (musi to być lokalny serwer http: //, aby można było wyświetlić zakładkę debugowania sieci, aby zobaczyć, który obraz przeglądarka została załadowana). Uruchamianie go w przeglądarce za pomocą adresu URL pliku przy użyciu adresu file:/// nie pozwala zobaczyć, który obraz jest ładowany za pomocą karty debugowania sieciowego.

<body> 
     <div class="wrapper"> 

      <img 
       src="http://i.imgur.com/DoWeH0X.jpg?1" 
       srcset="http://i.imgur.com/QV9vace.jpg?1 1400w, http://i.imgur.com/ZqkR6Bk.jpg?1 800w, http://i.imgur.com/gltBZ06.jpg?1 300w" 
       alt="#" 
      > 

    </body> 
</html>

Źródło

2015-06-17 sam

To pytanie zasługuje na więcej awansów. Dzięki! Co zdecydowałeś się najlepiej dla Ciebie? –

Można użyć

var img = document.getElementById('resizeMe'); 

window.onresize = function() { 
    img.outerHTML = img.outerHTML; 
}

co spowoduje HTML mają być wysyłane za pośrednictwem parsera ponownie, powodując przeglądarkę aby odświeżyć obraz według srcset.

Oczywiście prawdopodobnie powinieneś uwzględnić pewną logikę, aby wykryć, czy rozmiar ekranu zmienił się na rozmiar poza bieżącym zakresem, aby obraz nie był ponownie ładowany za każdym razem, gdy użytkownik nieznacznie zmieni rozmiar okna.

Można też sklonować węzeł, wstawić go przed bieżącym węzłem, a następnie usunąć stary węzeł.

var img = document.getElementById('resizeMe'); 

window.onresize = function() { 
    var clone = img.cloneNode(true); 
    img.parentNode.insertBefore(clone, img); 
    img.remove(); 
}

Spowoduje to również, że przetwarzanie zostanie ponownie renderowane w html, ale pochłonie więcej zasobów.

Źródło

2015-06-17 18:30:16

Twoja przegłosowana odpowiedź dostarczyła mi: '' 'NoModificationAllowedError: DOM Exception 7: Podjęto próbę modyfikacji obiektu, w którym modyfikacje nie są dozwolone." "Druga odpowiedź rozwiązuje problem, polecam usunięcie pierwszego przykładu, ponieważ już nie działa. – Mark

Żadna z tych opcji nie działa, gdy testowałem w przeglądarce Chrome w wersji 55.0.2883.87 m –

@Patrick. Jak to testujesz? (czy możesz dodać link do przykładu, który nie działa? –

i stwierdziliśmy, że wymusić ponowne czyni

var img = document.getElementById ('my-element'); img.src = img.src;

Źródło

2017-12-06 21:00:13 bas

Czy można ponownie obliczyć obraz `srcset` użyty przy zmianie rozmiaru okna przeglądarki?

Odpowiedz

Powiązane problemy