Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 340
  • Last Modified:

How to test if jquery lazy loading works?

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
Camillia
Asked:
Camillia
  • 8
  • 5
1 Solution
 
Randy DownsOWNERCommented:
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
 
GaryCommented:
In Developer Tools under Network you can see assets as they are loaded.
0
 
CamilliaAuthor Commented:
Yes, I see the lazy load jquery in the list, in developer tools.
0
Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

 
GaryCommented:
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
 
CamilliaAuthor Commented:
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
 
GaryCommented:
Then its not working - a live link will help or even just a test page of your code.
0
 
CamilliaAuthor Commented:
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
 
CamilliaAuthor Commented:
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
 
CamilliaAuthor Commented:
0
 
GaryCommented:
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
 
CamilliaAuthor Commented:
sorry, i was just testing that's why images are not found. Can you try that link again?
0
 
CamilliaAuthor Commented:
>>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
 
GaryCommented:
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
 
CamilliaAuthor Commented:
i can try it.
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

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

  • 8
  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now