issue with jquery load functionality

i am in a problem where my page does not become editable unless and untill its all images and everthing does not appear. so to make that, i tried the image in one scenario to be load my an ajax call.

i just mad a small call like this

$("#refresh").html('<img src="/dummy.gif"'>');
$("#refresh").load('abc.cfm?id=#id#');
<div id="refresh"></div>

now the case is what i am trying page should separately and initially the dummy.gif should be shown and then a ajax call will be made immediately after it to load the actual image from the server which is taking time to show and display in the div.

just trying to separate the load taking image from actual page call so page should become editable while image could keep loading later.


but this approach is not working, as initially i load a page, it does not eve show an image nor it load the file

then i tried adding the setInterval function to the load method like this:

setInterval(function() {
           $("#refresh").load('abc.cfm?id=#id#');
},1000);

so by this it makes call every 1 sec and then it keeps on executing that specific code every one second. this approach works, but i am not sure if this is a feasible solution and it is making a call again and again, it will hit performance, so anyone can guide better

Thanks
LVL 16
Gurpreet Singh RandhawaCEOAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Gurvinder Pal SinghCommented:
did you tried this approach?

<script>
$(document).ready(function(){
    $("#refresh").load('abc.cfm?id=#id#');
});
</script>

<div id="refresh"><img src="/dummy.gif"'></div>
0
Gurpreet Singh RandhawaCEOAuthor Commented:
btw document.ready is already defined at the top of the Page but that is for another jquery function, so do i need to declare again
0
Gurvinder Pal SinghCommented:
you don't have to declare it again, but simply call this jquery line in that document.ready() event

("#refresh").load('abc.cfm?id=#id#');

Idea is to make sure that element with id 'refresh' is loaded into the document before this jquery statement is executed
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Gurpreet Singh RandhawaCEOAuthor Commented:
well i have noticed few the document.ready is opening for some jquery functions and then it is closed, like in a page which is like a set of included page , some included pages have jquery, that has already declared document.ready but that closed it too

but also my concern is if i have 100 records the document.ready will run 100 times
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.