Javascript in jquery konvertieren .with

Question

Ich verwende dieses Skript, um kleine oder große Bilder abhängig von der Bildschirmbreite zu laden.

<script> 
var jt_width = screen.width; 
//var jt_height = screen.height; 
if (jt_width < 361) {document.write('<div class="small-image"><img src="http://www.example.com/small-image.jpg" alt="small image alt"></div>') } else { document.write('<div class="large-image"><img src="http://www.example.com/large-image.jpg" alt="large image alt"></div>')}; 
</script> 

Der Nachteil ist, dass auf einem Handy nicht im Fluge nicht ändert, wenn jemand von Hoch- auf Querformat geht, und ich möchte jQuery verwenden, um dies zu tun.

Ich lese online über verschiedene Möglichkeiten wie window.outerWidth oder .width() und ich verstand, dass .width() ist die beste Lösung in Bezug auf die Browser-Kompatibilität.

Ich möchte das obige Skript in eine jquery-Version konvertieren, aber da ich kaum etwas über Javascript weiß, weiß ich nicht, wie man das macht. Dies ist, was ich habe

function load(){ 
    w.value = $(window).width(); 
    h.value = $(window).height(); 
} 

Wie kann ich die gleiche Ausgabe mit jquery bekommen?

Answer 1

Ihr neues Skript hilft nicht bei der Responsivität des Skripts. Sie benötigen einen Zuhörer hinzuzufügen:

<script> 
var jt_width = screen.width; 
function doAThing() { 
    if (jt_width < 361) { 
    document.write('<div class="small-image"><img src="http://www.example.com/small-image.jpg" alt="small image alt"></div>') } else { document.write('<div class="large-image"><img src="http://www.example.com/large-image.jpg" alt="large image alt"></div>') 
    }; 
} 

doAThing(); 
window.addEventListener('resize', doAThing); 
</script> 

EDIT: Ich bin ziemlich sicher, dass ‚die Größe‘ funktioniert für die Orientierung in Ordnung, aber wenn Sie es testen und es funktioniert nicht gut könnte man auch einen orientationchange Zuhörer auf die hinzufügen als auch Funktion:

window.addEventListener('orientationchange', doAThing);

Answer 2

Dies ist eine Implementierung mit jquery:

$(window).resize(function () { 
    var width = $(window).width(); 
    var height=$(window).height(); 
    /**on resize you can change your content or code based on your condition*/ 
}); 
/*This event will be triggered when the window size will change */