Solved

Where do I put this code?

Posted on 2013-06-10
21
384 Views
Last Modified: 2013-06-10
In this link, I downloaded lazu load jquery. I added it to my project, added class="lazy" to the image tag...

But I dont know where do I add
$("img.lazy").lazyload(); 

Open in new window


Example says to add it to the the code but I dont know where...

thanks,
0
Comment
Question by:Camillia
  • 11
  • 10
21 Comments
 
LVL 9

Expert Comment

by:Ishaan Rawat
ID: 39234671
<script>
$("img.lazy").lazyload(); 
</script>

Open in new window



put this before ending body tag......
0
 
LVL 7

Author Comment

by:Camillia
ID: 39234725
so somewhere in the body tag? not in "head" ?
0
 
LVL 9

Accepted Solution

by:
Ishaan Rawat earned 500 total points
ID: 39234733
yes in the end before its written </body>..

like...

<script>
$("img.lazy").lazyload(); 
</script>

</body>

Open in new window

0
 
LVL 7

Author Comment

by:Camillia
ID: 39234746
does it matter if it's in the beginning?? or does it have to be at the end...right before </body>?
0
 
LVL 9

Expert Comment

by:Ishaan Rawat
ID: 39234754
Yaa it matters...

The load time of the page is dependent on this also.....
The load time of your website is decreased when you put it in the ending...

You just do and see the magic,....
0
 
LVL 7

Author Comment

by:Camillia
ID: 39234769
thanks, let me add it and see how it works. Thanks for your help.
0
 
LVL 9

Expert Comment

by:Ishaan Rawat
ID: 39234774
welcome... and try soon...

waiting for your reply....
0
 
LVL 7

Author Comment

by:Camillia
ID: 39234842
Our code structure is different since this is a vendor app with their own programming language but they incorporate JQuery. There are tons and tons of files....

I look at the rendered page in the browser and at the bottom of the page, i see these

<div id="QuickViewDialog"> </div>
<div id="BonusProductDialog"> </div>
</body>

Open in new window


I did a search in the code and the 2 divs are in a .js file like below. I wonder if I need to put them in the JS file and the code will render it at the bottom

jQuery("<div/>").attr("id", "QuickViewDialog").html(" ").appendTo(document.body);
				
				// bonus product dialog div
				jQuery("<div/>").attr("id", "BonusProductDialog").html(" ").appendTo(document.body);

Open in new window


How can I do that with
$("img.lazy").lazyload(); 

Open in new window

0
 
LVL 9

Expert Comment

by:Ishaan Rawat
ID: 39234853
then do this...

<script>
$(document).ready(function() {
      $("body").append("<script>$("img.lazy").lazyload();</script>");
});
</script>

Open in new window

0
 
LVL 7

Author Comment

by:Camillia
ID: 39234868
yeah, I can put that in the file where the image tag is. That's easier. let me try.
0
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 
LVL 9

Expert Comment

by:Ishaan Rawat
ID: 39234881
or what you do is put as I said in the third comment no matter if any thing else is also dynamically coming... but you should try to put it in the last....
0
 
LVL 7

Author Comment

by:Camillia
ID: 39234912
Ok, sorry, I dont understand where i need to put it...

this is how the .js file looks like. Note the comment...seems like this renders at the end of the file...which is what i want to do...put it at the end of the file...before </body>

So, should I just add this at the end of this code (see below)




// app initializations called from jQuery(document).ready at the end of the file
init: function() {
	// register initializations here				
	// quick view dialog div
				jQuery("<div/>").attr("id", "QuickViewDialog").html(" ").appendTo(document.body);
				
				// bonus product dialog div
				jQuery("<div/>").attr("id", "BonusProductDialog").html(" ").appendTo(document.body);

//*** should I just add it here like this???
$("body").append("<script>$("img.lazy").lazyload();</script>");
.....

}

Open in new window

0
 
LVL 9

Expert Comment

by:Ishaan Rawat
ID: 39234933
yaa you can doo that ...

but first comment the line correctly...
remove ***
after that its ok....
0
 
LVL 7

Author Comment

by:Camillia
ID: 39234946
yes, trying it now. Thanks for sticking with this.
0
 
LVL 9

Expert Comment

by:Ishaan Rawat
ID: 39234954
your welcome...
0
 
LVL 7

Author Comment

by:Camillia
ID: 39235177
no, having it as ID: 39234912
breaks the top navigation menu bar we have. I'll try
<script>
$("img.lazy").lazyload();
</script>

somewhere on the page (since I cant find the closing body tag) and see if that works and if that doesnt break the navigation menu.
0
 
LVL 9

Expert Comment

by:Ishaan Rawat
ID: 39235197
I said no... and if this creates a problem then it might be errors somewhere in your code ...

Because this is the method that should be used....
0
 
LVL 7

Author Comment

by:Camillia
ID: 39235543
I'm not sure what you mean.. which method is correct and which one isnt?

$("body").append("<script>$("img.lazy").lazyload();</script>");

and

<script>
$("img.lazy").lazyload();
</script>

which one isn't correct? this created a problem when I added it at the bottom of that code in ID: 39234912
$("body").append("<script>$("img.lazy").lazyload();</script>");
0
 
LVL 7

Author Comment

by:Camillia
ID: 39235562
I get this error :Uncaught SyntaxError: Unexpected identifier
with this line of code
$("body").append("<script>$("img.lazy").lazyload();</script>");

that's why the top menu breaks. Not sure what's wrong with it.
0
 
LVL 7

Author Comment

by:Camillia
ID: 39235753
It works :)

That line should've been like this
$("body").append('<script>$("img.lazy").lazyload();</script>');

and i looked at the output, it's at the end of the page, right before the body. It's great. Thanks for your help.
0
 
LVL 9

Expert Comment

by:Ishaan Rawat
ID: 39236658
your welcome...
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
object passed as reference 1 20
New to Angular - How do I define the table columns 5 28
jQuery AJAX Redirects Without Response/Error 10 42
Jquery get each value 2 0
Introduction HyperText Transfer Protocol (http://www.ietf.org/rfc/rfc2616.txt) or "HTTP" is the underpinning of internet communication.  As a teacher of web development I have heard many questions, mostly from my younger students who have come to t…
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

929 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

6 Experts available now in Live!

Get 1:1 Help Now