Solved

How to test if jquery lazy loading works?

Posted on 2013-06-10
14
325 Views
Last Modified: 2013-06-12
So, I finally got this example working

https://github.com/tuupola/jquery_lazyload#readme

Now, how can I actually test to see if the lazy loading works? I use Chrome and I can see the script and the class="lazy" on the image tags...but how can I know it's actually working? what test can I run?

thanks
0
Comment
Question by:Camillia
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 8
  • 5
14 Comments
 
LVL 30

Expert Comment

by:Randy Downs
ID: 39235818
The best way to test is to create 2 identical pages: one with lazy and another without. Time the download of both. Lazy should download faster since it delays images.
0
 
LVL 58

Expert Comment

by:Gary
ID: 39235829
In Developer Tools under Network you can see assets as they are loaded.
0
 
LVL 7

Author Comment

by:Camillia
ID: 39235848
Yes, I see the lazy load jquery in the list, in developer tools.
0
Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
ID: 39235855
If you are on the Network tab you should the images load as you scroll down your web page - if it is working correctly
The jquery will load straight away anyway - you need to see if the images are being added to the list as you scroll or if they are all being loaded at page load.
0
 
LVL 7

Author Comment

by:Camillia
ID: 39235875
so, scroll up and down the page and look at the network tab , column "name" to see if the images are being displayed in that column??

If that's the case...i don't see the "network" tab being refreshed with new data...
0
 
LVL 58

Expert Comment

by:Gary
ID: 39235885
Then its not working - a live link will help or even just a test page of your code.
0
 
LVL 7

Author Comment

by:Camillia
ID: 39235901
Would a page source work? I don't want to post a link here, but i will, if i have to.
I've attached page source.
page-source.txt
0
 
LVL 7

Author Comment

by:Camillia
ID: 39235936
This is how I load it, maybe this is not correct

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

And when it renders, it looks like this


..... code here
<script>$("img.lazy").lazyload();</script>
</body>
</html>
0
 
LVL 7

Author Comment

by:Camillia
ID: 39235962
0
 
LVL 58

Expert Comment

by:Gary
ID: 39237986
That's a lot of code to try and debug
You have js error's with app.search.results and this.httpchannel

But all the images seem to be not found.
Why are using append to add the script. You should just add the script at the end of the page or put it in a document.ready function.
0
 
LVL 7

Author Comment

by:Camillia
ID: 39238018
sorry, i was just testing that's why images are not found. Can you try that link again?
0
 
LVL 7

Author Comment

by:Camillia
ID: 39238031
>>Why are using append to add the script. You should just add the script at the end of the page or put it in a document.ready function.

Because this is a vendor app and I cant just easily add code to it. So I added it here, in this code.

Now someone said i don't see it working because the images are too small.
// 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);
				
				
				$("body").append('<script>$("img.lazy").lazyload();</script>'); 

...

Open in new window

0
 
LVL 58

Expert Comment

by:Gary
ID: 39238128
Not sure about this, but I would think, you would need the lazyload in a function and then call the function after it has been appended

$("body").append('<script>function dolazyload(){$("img.lazy").lazyload();}</script>');
dolazyload();
0
 
LVL 7

Author Comment

by:Camillia
ID: 39238148
i can try it.
0

Featured Post

MIM Survival Guide for Service Desk Managers

Major incidents can send mastered service desk processes into disorder. Systems and tools produce the data needed to resolve these incidents, but your challenge is getting that information to the right people fast. Check out the Survival Guide and begin bringing order to chaos.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
ASP.NET MVC -Update model when click on <li> element 29 104
jquery change div image on page reload using Jquery 9 61
Time Picker 3 22
Add Promise to Existing Code 6 32
What is a Lightbox? A Lightbox is the effect you see when you click, for example, an image and the screen fades out and up pops the same image but in its full size dimensions. There are lots of Lightbox effects for jQuery. Problem is they are a…
Requirements JQuery 1.6+ HTML CSS Introduction This article was inspired by an EE question (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28372511.html) on how to make a page show some balloons animate up a page…
The viewer will learn how to dynamically set the form action using jQuery.
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)

751 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