Solved

Where do I put this code?

Posted on 2013-06-10
21
383 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
Comment Utility
<script>
$("img.lazy").lazyload(); 
</script>

Open in new window



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

Author Comment

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

Accepted Solution

by:
Ishaan Rawat earned 500 total points
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
thanks, let me add it and see how it works. Thanks for your help.
0
 
LVL 9

Expert Comment

by:Ishaan Rawat
Comment Utility
welcome... and try soon...

waiting for your reply....
0
 
LVL 7

Author Comment

by:Camillia
Comment Utility
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
Comment Utility
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
Comment Utility
yeah, I can put that in the file where the image tag is. That's easier. let me try.
0
What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

 
LVL 9

Expert Comment

by:Ishaan Rawat
Comment Utility
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
Comment Utility
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
Comment Utility
yaa you can doo that ...

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

Author Comment

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

Expert Comment

by:Ishaan Rawat
Comment Utility
your welcome...
0
 
LVL 7

Author Comment

by:Camillia
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
your welcome...
0

Featured Post

Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

by Julian Matz As of jQuery (http://jquery.com/) 1.4 the .live() method (http://api.jquery.com/live/) supports custom events as well as some standard JavaScript events that it previously didn't support. Among these is the submit event. Unlike …
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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…

743 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

7 Experts available now in Live!

Get 1:1 Help Now