Capture screen size at requisition time

Navigation
6

I would like to know if there is a way in JavaScript to execute methods at the moment of the request that the client makes to the server. I have a project where I use several large images in the occupied memory, and it would be interesting to capture the size of the screen at the moment of the request to serve the image with more weight appropriate to the user's device.     

asked by anonymous 27.02.2014 / 11:45

4 answers

11

This question in SOen may be of interest. In particular, I compile here some of the suggestions given.

Get page and browser sizes, with jQuery: 

$(window).height();   // altura do browser
$(document).height(); // altura do documento HTML
$(window).width();   // comprimento do browser
$(document).width(); // comprimento do documento HTML

Get screen size: 

screen.height;
screen.width;

Alternative without jQuery: 

var w = window,
    d = document,
    e = d.documentElement,
    g = d.getElementsByTagName('body')[0],
    x = w.innerWidth || e.clientWidth || g.clientWidth,
    y = w.innerHeight|| e.clientHeight|| g.clientHeight;

Another way to get screen dimensions, apparently supported by browsers in general: 

alert(window.screen.availWidth);
alert(window.screen.availHeight);

I tested them in the browser console (Firefox 27.0.1), and they all work. It is a matter of seeing which measure you are most interested in, possibly the one in the browser window.

I do not know if this data can be sent along with the page request. However, you can opt for lazy loading of the images, if at all possible. I would use some temporary element in the HTML to fill the space, and give the user the understanding that something is still missing. And then, have the right images loaded as fast as possible. Example: 

<!DOCTYPE html>
<html>
<head>
    <script>
        $(document).ready(function () {
           if ((window.screen.availHeight < 1234) &&
                   (window.screen.availWidth < 1234))
               document.getElementById("img1").src = "small";
           else
               document.getElementById("img1").src = "big";
        })
    </script>
</head>
<body>
    <img id="img1" src=""/>
    <p>Algum texto.</p>
</body>
</html>

Alternatively, you can take a look at the CSS3 media queries if you help. Here's a article that talks a little about it.

    
27.02.2014 / 12:03
3

Good morning, my friend!

Well, we can split your question into 2 steps: Capture the screen size and send it to the server.

The friend @afsantos correctly answered how to get the screen size: 

var w = window,
    d = document,
    e = d.documentElement,
    g = d.getElementsByTagName('body')[0],
    x = w.innerWidth || e.clientWidth || g.clientWidth,
    y = w.innerHeight|| e.clientHeight|| g.clientHeight;

In order to send this information to the server, it would be interesting to use ajax. Following the same pattern of the alternative without JQuery, the code would look like this: 

var xmlhttp;

/* Requisição Ajax para o servidor */
if (window.XMLHttpRequest) {
    xmlhttp = new XMLHttpRequest();
} else {
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

xmlhttp.open("GET", "http://servidor/pagina.php?width="+x+"&height="+y, true);
xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
         document.getElementById("id_div").innerHTML = '<img src="' + xmlhttp.responseText + '" />'
    }
}
xmlhttp.send();

In this case, xmlhttp.responseText would be the server response, containing the URL of the best image to load, according to the width and height parameters you passed.

    
27.02.2014 / 14:43
2

You can use the following to set the src of the image as soon as the img tag is rendered: 

<img src="" onerror="this.src = 'http://myserver/myimage?w=' + screen.width + '&h=' + screen.height" />

As a result, screen.width and screen.height will be passed as image upload parameters to the server, which can then return the image of the most appropriate size.

Or else you can do the processing that you think is most appropriate within the error event handler to load the most appropriate image.

The error event is called because the image tag has the empty src at first ... if you try to load an image, and then give error loading the onerror will be called again, and so it will go into loop. So the ideal would be to clean up the event so that it runs only once.

    
27.02.2014 / 14:25
1

You ask about JavaScript, so the way is to send the data via Ajax and do a redirect. Then when you reload the page, you will already have the data stored in session there on the server (sent by the Ajax request sooner).

The sequence would be:

  • The server has the screen size data in session ?

  • If yes, send the page right.

  • If not, just send a minimal JavaScript to:

    • get the data and then send it via Ajax (and the server writes the data to session );

    • ready - we are back in point 1 (and the answer will be "yes").

    • (If you do not want Ajax, you can even put the screen size data in query string .)

    But if you did not speak in JavaScript, my answer would be pure CSS: use% conditional% with media queries !

    The idea is to load a specific CSS file, according to the screen size. You can easily put an image as location.reload() of a window.location = '...' or other element (you do not need to specify image URL in @import of HTML).

    More or less like this: 

    @import url('grande.css') screen and (min-width: 1080px);
@import url('medio.css') screen and (min-width: 640px);
@import url('pequeno.css') screen and (min-width: 256px);

    You do not even need JavaScript - the image will be chosen by the CSS that will be imported according to the screen size.

        
    27.02.2014 / 19:25
    What is the difference between the 'q' and 'blockquote' and 'cite' tags in HTML? And how do you use them correctly? Delete all tables from a bank at once