Data html with jquery

Question

I have a question.

I will make the jquery be in charge of inserting the images depending on the width, and each image will be on the data-mobile and data-desktop.

<img class="data-img" src="" data-mobile="url" data-desktop="url" />


$(document).ready(function() {
    var device = $(window).innerWidth() > 515 ? "desktop" : "mobile";
    $("img.data-img").each(function() {
        $(this).attr("src", $(this).data(device));
    });
});

My question is this::

If I have any img one will replace the other or the function will be called for each?

Answer 1

The function .each will be called to each <img> with the specified class and change the src in accordance with the data- of each element travelled.

In the example below, the basketball would be "mobile" and tennis "desktop". Change the window size and see that each image will change when the screen is smaller than 515px and greater:

//$(document).ready(function() {
	$(window).on("load resize", function(){
            var device = $(window).innerWidth() > 515 ? "desktop" : "mobile";
            $("img.data-img").each(function() {
                $(this).attr("src", $(this).data(device));
            });
	});
//});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img height="100" class="data-img" src="" data-mobile="https://upload.wikimedia.org/wikipedia/commons/thumb/4/48/Basketball.jpeg/220px-Basketball.jpeg" data-desktop="https://images-na.ssl-images-amazon.com/images/I/41IJsgFvWzL._SX355_.jpg" />
<img height="100" class="data-img" src="" data-mobile="https://images-na.ssl-images-amazon.com/images/I/41IJsgFvWzL._SX355_.jpg" data-desktop="https://upload.wikimedia.org/wikipedia/commons/thumb/4/48/Basketball.jpeg/220px-Basketball.jpeg" />
<img height="100" class="data-img" src="" data-mobile="https://upload.wikimedia.org/wikipedia/commons/thumb/4/48/Basketball.jpeg/220px-Basketball.jpeg" data-desktop="https://images-na.ssl-images-amazon.com/images/I/41IJsgFvWzL._SX355_.jpg" />

Answer 2

The @DVD answer already answers your question. But as this is a very broad and discussed subject (including I am very interested in a standard solution) I will leave an alternative that I hope will soon be adapted for all browsers.

The tag <picture> of Html5

This new tag allows us to treat images the same way we treat the tag <audio>, where we can put various formats to work on different types of browsers. In it, we can use the attribute media with the same syntax as when we use @media-queries in CSS, to display an image relative to the screen size.

See this example (resize the screen) also has on Jsfiddle:

picture, img {
	width: 100%;
	height: auto;
}

<picture>
    <source srcset="https://vidanimal.com.br/wp-content/uploads/papillon.jpg" media="(max-width: 700px)" alt="Pequeno">
    <source srcset="https://www.blupet.com.br/uploads/pets/26984/2698418092017185025000000.jpg" media="(max-width: 1024px)" alt="Medio">
    <img srcset="https://www.ultracurioso.com.br/wp-content/uploads/2015/07/sao-bernardo.jpg" alt="Grande (imagem fallback padrão)">
</picture>

When resizing the screen will be shown the image corresponding to the @media-querie you defined in the attribute media, in it you can use the attributes max-width, min-width, max-height, min-height, orientation among others that are in accordance with the syntax of @media-queries.

In the tests I did worked on Chrome(v61), Firefox(v55) and Opera(v48), in IE11 I had to add another line in the tag <img> standard with a src to be able to function, it was like this:

<img src="https://www.ultracurioso.com.br/wp-content/uploads/2015/07/sao-bernardo.jpg" srcset="https://www.ultracurioso.com.br/wp-content/uploads/2015/07/sao-bernardo.jpg" alt="Grande (imagem fallback padrão)">

This worked for the other navigators I mentioned without giving conflict.

You can see the support for this tag on Can I Use and use it if you see it coming to mate, and still if you are not sure there is a JS plugins called Picturefill that promises to be fine crossbrowser and uses the same syntax I showed.

The answer was a bit big, but if someone has a suggested edit just comment.

Sources: Webdesign.tutsplus, Google ;) and Smashing Magazine.