CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Mark
Mark

Reputation: 3859

Possible to aquire a CSS defined size for an image via Jscript and change URL values before image loads?

So what I have is the following HTML structure

<div class="large">
<a href="http://www.google.com">
<img src="/wp-content/themes/firstone/mythumb.php?src=http://www.example.com/test.jpg&h=600&w=800&zc=1&s=1" width="800" height="600" border="0" /></a>
</div>

Now that mythumb.php is a thumbnailer script that will on the fly create a thumbnail with predefined size limits (in this case 800x600).

However in my CSS file i've set 

.large img
{
width:400px;
height:300px;
}

This is done so I achieve a retina effect on iphones/ipad, etc..

However, I was thinking this is better to be accomplished dynamically, and I want to be able to pull the CSS defined width and height and replace those values in the URL

In this case, would it be possible for javascript to change

/wp-content/themes/firstone/mythumb.php?src=http://www.example.com/test.jpg&h=600&w=800&zc=1&s=1

to

/wp-content/themes/firstone/mythumb.php?src=http://www.example.com/test.jpg*&h=300&w=400*&zc=1&s=1

This change should occur before the image loads so we dont waste the users bandwidth downloading the same image twice.

I would also like to only apply this to images being called from the mythumb.php, not my other static images on the page

Does anyone think something like this is possible?

Upvotes: 1

Views: 192

Answers (3)

Koen Peters
Koen Peters

Reputation: 12916

If you set the src of the image in the HTML source on the server it will in most cases result in the browser fetching the image twice. You can do two things:

  1. Set the src using javascript and initially let it point to a placeholder.
  2. Set the style of the a tag inline.

If the size of the image is different every time I would go for the second option because it is easier and it is faster

SO:

<div style="width: 800px; height: 600px">
  <a href="http://www.google.com">
  <img src="/wp-content/themes/firstone/mythumb.php src=http://www.example.com/test.jpg&h=600&w=800&zc=1&s=1" width="800" height="600" border="0" /></a>
</div>

The 800 and 600 values would be set using php.

If however the size is always the same in the "large" case you could use the javascript approach you mentioned. It is slightly slower because the CSS that has the width and height definition is fetched asynchronously. You will have to wait for the document.onload event instead of the the domready event to make sure you have the CSS width and height definition. You can then use javascript to fetch the width and height of the div and construct the image src. Because the onload can take a long time (especially is you have external potentially slow content such as social media buttons) the image will not be visible until everything is pulled from the server.

I would create a php large server variable and use that everywhere. It's most definitely the fastest and you still have the size definition on one place.

Upvotes: 0

Pablo
Pablo

Reputation: 1093

You can't prevent the loading of the images if they have a src. You can change it to another attr like 'data-src'

<img data-src="/wp-content/themes/firstone/mythumb.php?src=http://www.example.com/test.jpg&h=600&w=800&zc=1&s=1" width="800" height="600" border="0" />

Then you can iterate them like this: (not recommended if you have a lot of imgs though)

var imgs = document.getElementsByTagName('img');​​
for (var i = 0; i < imgs.length; i++) {
    if (notRetina) {
        imgs[i].src = imgs[i].getAttribute('data-src')
        .replace('h=600', 'h=300')
        .replace('w=800', 'h=400');
    }
}

You probably can do better than a replace to put the values you want (as in not puting them in the data-src attr).

Upvotes: 0

Patrick Gunderson
Patrick Gunderson

Reputation: 3281

in html layout your img tags, but omit a src attribute

<img id="test" class="variableRes" />
<img id="test1" class="variableRes"/>

in js set up an array of your image paths:

myImages = {
    test: "/wp-content/themes/firstone/mythumb.php?src=http://www.example.com/test.jpg",
    test1: "/wp-content/themes/firstone/mythumb.php?src=http://www.example.com/test1.jpg"
}

Your css determines the img sizes, so you can query the img style, build the url and assign the src to the img tags

$('.variableRes').each(function(){
    var $el = $(this);
    var id = $el.attr("id");
    var height = $el.css("height").substr(0,-2);//strip "px"
    var width = $el.css("width").substr(0,-2);
    $el.attr("src", myImages[id] + "&h="+ height +"&w="+ width+"&zc=1&s=1");
})

Upvotes: 1

Related Questions