CODEWITHSUNDEEP
javascriptjquery
user1207524
user1207524

Reputation: 369

Is this javascript worth using to speed up page loading?

I have written this code to make my page load faster by loading smaller resolution picture depending on their resolution...

window.onload = function() {
    bannerRes();
    function bannerRes() {
        var x = $(window).width();
        var y = $("#banner");
        if(x<=1920) {
            y.css('backgroundImage', 'url(team_banner_1920.jpg)');
        } else {
            y.css('backgroundImage', 'url(team_banner_2560.jpg)');
        };
    };
    $(window).resize(function() {
        bannerRes();
    });
};

But I'm not sure if it's worth using or if any issues could come up with it. Any opinions please? Thank you

Upvotes: 1

Views: 119

Answers (3)

Nash Worth
Nash Worth

Reputation: 2574

It looks like you are implementing an Adaptive Image solution.

Much discussion on this topic is taking place in the W3C, so be advised that the "experts" are looking into this topic.

The situation gets trickier if you are delivering to iOS Retina display on mobile devices. Because they require 'double-density'. And effectively double your image maintenance, and JS code to maintain the experience cross-device.

The problem is that this can become a maintenance nightmare if you have to update your code, a few years from now, for every new device that may come out.

The initial solution to this is to use @media-query which will give you the capability to maintain the images in your css, and simplify your JS.

An interesting topic that is pending W3C is a <picture/> tag that would give responsive capacity at the dom attribution level. Thus avoiding both, css and JS footprint. But this remains to be seen at this point.

Hope that helps.

Upvotes: 1

leobelones
leobelones

Reputation: 598

You could try image resizing with jquery's animate... then you'll have only one image on the server, and you can resize it accordingly...

This question has the answer on how to do it...

Upvotes: 0

Mutation Person
Mutation Person

Reputation: 30488

Only you can tell if it is worthwhile.

It is well known that Google factors page load speed into its ranking algorithms, so if this is your concern then it could be effective.

Is there a lot of traffic to your site? Is it likely that users will have lots of different screen reolutions? Can you infer anything like that from your site stats - i.e. do you have hits from a wide ditribution of screen resolutions?

So, in short its not really possible to answer here. If you gave more specifics on the site then it may be possible to infer, but even then you're better off trying some metrics yourself.

Upvotes: 0

Related Questions