CODEWITHSUNDEEP
jqueryimageload
saomi
saomi

Reputation: 885

load image before the script

I have a script for resizing the background image for every pages. It happens that sometimes e slower machines and pages with lots of content(other images) the background image becomes stretched.

Inittialy I had this

$(document).ready(function() {
    ...code for resizing the image...
});

and the I decided that the code it's executed just after the image(with the id img_bg) is loaded, so: 

$("#img_bg").ready(function() {
  ...code for resizing the image...
});

I got better results, but still not perfect as I wanted.

Does anyone has any other ideas??

Thanks

Upvotes: 2

Views: 379

Answers (2)

MindingData
MindingData

Reputation: 12460

If you place the javascript code immediately after your div/html control then it will still execute when the control is ready, you do not need a "ready" statement.

A document.ready is simply to signify that all HTML is loaded and you can do anything with the dom, but you can modify elements before the entire page is ready.

Upvotes: 0

s1lence
s1lence

Reputation: 2188

According to the jquery documentation [1] .ready() really only executes after the element is fully loaded. So your problem may be, that there is a ceratin time until your resizing script has finished it's job. (especially if other things are to be processed simultaniously) One way to solve this would be to simply hide the image until your resizing is done. Use the show [2] function in the end of your scaling method and initially set display="none" in your css for #img_bg for that purpose.

However you should think about your whole setup. It is never really clever to load a large image and then resacle it with javascript if you would only use a smaller one. Then it might be better to have a smaller one initially (to save bandwith and therefore increase loading speed)

And an other thought is that this resizing most likely could be achieved with a clever use of some css instead of javascript. But therefore you would have to provide some more details about how your script actually works and what it's doing.

[1] http://api.jquery.com/ready/

[2] http://api.jquery.com/show/

Upvotes: 2

Related Questions