• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 402
  • Last Modified:

Where do I put this code?

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
Camillia
Asked:
Camillia
  • 11
  • 10
1 Solution
 
Ishaan RawatDesigner | Developer | ProgrammerCommented:
<script>
$("img.lazy").lazyload(); 
</script>

Open in new window



put this before ending body tag......
0
 
CamilliaAuthor Commented:
so somewhere in the body tag? not in "head" ?
0
 
Ishaan RawatDesigner | Developer | ProgrammerCommented:
yes in the end before its written </body>..

like...

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

</body>

Open in new window

0
Cloud Class® Course: SQL Server Core 2016

This course will introduce you to SQL Server Core 2016, as well as teach you about SSMS, data tools, installation, server configuration, using Management Studio, and writing and executing queries.

 
CamilliaAuthor Commented:
does it matter if it's in the beginning?? or does it have to be at the end...right before </body>?
0
 
Ishaan RawatDesigner | Developer | ProgrammerCommented:
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
 
CamilliaAuthor Commented:
thanks, let me add it and see how it works. Thanks for your help.
0
 
Ishaan RawatDesigner | Developer | ProgrammerCommented:
welcome... and try soon...

waiting for your reply....
0
 
CamilliaAuthor Commented:
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
 
Ishaan RawatDesigner | Developer | ProgrammerCommented:
then do this...

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

Open in new window

0
 
CamilliaAuthor Commented:
yeah, I can put that in the file where the image tag is. That's easier. let me try.
0
 
Ishaan RawatDesigner | Developer | ProgrammerCommented:
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
 
CamilliaAuthor Commented:
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
 
Ishaan RawatDesigner | Developer | ProgrammerCommented:
yaa you can doo that ...

but first comment the line correctly...
remove ***
after that its ok....
0
 
CamilliaAuthor Commented:
yes, trying it now. Thanks for sticking with this.
0
 
Ishaan RawatDesigner | Developer | ProgrammerCommented:
your welcome...
0
 
CamilliaAuthor Commented:
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
 
Ishaan RawatDesigner | Developer | ProgrammerCommented:
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
 
CamilliaAuthor Commented:
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
 
CamilliaAuthor Commented:
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
 
CamilliaAuthor Commented:
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
 
Ishaan RawatDesigner | Developer | ProgrammerCommented:
your welcome...
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: Amazon Web Services - Basic

Are you thinking about creating an Amazon Web Services account for your business? Not sure where to start? In this course you’ll get an overview of the history of AWS and take a tour of their user interface.

  • 11
  • 10
Tackle projects and never again get stuck behind a technical roadblock.
Join Now