Calling JavaScript Functions inside of jQuery Functions?

Question

I have two JavaScript functions that I want to call from inside of a jQuery function. Because I load images dynamically, I want to check the width of each image by calling the two functions func1() and func2() that will check the width.

If width < 20px then double width

I don't want to wait for the images to fully load then do the check.

I tried this but didn't work

$(document).ready(function ()
{
    $('img').each(function()
    {
       ....
    })

    func1();
    func2();
})

function func1()
{
   ....
}

function func2()
{
   ....
}

What am I missing?

Semicolons after the ready/each calls. What does the browser error console show? — tvanfosson, Dec 18 '11 at 13:56
This code would call func1() and func2() as soon as the DOM is ready. What is it that you want to do? — Christofer Eliasson, Dec 18 '11 at 13:57
Are you sure you have included jQuery? It works: http://jsfiddle.net/37YKR/ — Ricardo Souza, Dec 18 '11 at 13:59
Semicolons are not required in Javascript when the next function start on a new line. This code is valid — paulcol., Dec 18 '11 at 14:10
For the width of an image, I think you want something like `$('img').each` instead. You're currently iterating over "bodies" (of which you only have one). — pimvdb, Dec 18 '11 at 14:18
can you post the full code here. structure of your code is valid. may be a problem with logic which is not shown here — Chamika Sandamal, Dec 18 '11 at 14:28

score 1 · Accepted Answer · edited May 23 '17 at 10:34

1

Unless the img tags have the width specified you will not be able to correctly get the width before it is completely loaded. The browser has no way of knowing what are the dimensions until it has the entire image.

Here is a way to wait until the images are loaded:

Official way to ask jQuery wait for all images to load before executing something

edited May 23 '17 at 10:34

Community

1
1

answered Dec 18 '11 at 14:26

epignosisx

6,152
2
30
31

score 0 · Answer 2 · answered Dec 18 '11 at 14:31

0

I had a problem similar your issue. I think you have to move your functions into jquery block.

$(document).ready(function() {
    function1 () {
       ...       
    }
    function2 () {
       ... 
    }
});

Otherwise, I don't think they can be called from inside of jQuery. Test it and inform me about the result.

answered Dec 18 '11 at 14:31

Mohammad Saberi

12,864
27
75
127

2

no need to put inside jQuery block. it is always recommend to put outside of document ready event. otherwise functions are evaluating only after page load. this will increase page load time – Chamika Sandamal Dec 18 '11 at 14:34
Thank you Chamika. I'll try what you said. – Mohammad Saberi Dec 18 '11 at 14:40

score 0 · Answer 3 · answered Dec 18 '11 at 14:37

You could change this:

$(document).ready(function ()

to this:

$(window).load(function ()

to ensure that all images are loaded.

Another option would be to bind load handlers to the images themselves, but there may be issues if the images are cached.

$('img').load(function() {
    func1();
    func2();
});

You should note that this will call the functions once for each image, which may mean that you'll need to change how the functions work. Like have them receive the individual image as an argument.

:( using that has the same effect as `window.onload = messWH;` which is not I want. Guess it's like what epignosisx said. But hey thanks — Jonas, Dec 18 '11 at 15:02

Calling JavaScript Functions inside of jQuery Functions?

3 Answers3