Camillia
asked on
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
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
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.
In Developer Tools under Network you can see assets as they are loaded.
ASKER
Yes, I see the lazy load jquery in the list, in developer tools.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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...
If that's the case...i don't see the "network" tab being refreshed with new data...
Then its not working - a live link will help or even just a test page of your code.
ASKER
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
I've attached page source.
page-source.txt
ASKER
This is how I load it, maybe this is not correct
$("body").append('<script> $("img.laz y").lazylo ad();</scr ipt>');
And when it renders, it looks like this
..... code here
<script>$("img.lazy").lazy load();</s cript>
</body>
</html>
$("body").append('<script>
And when it renders, it looks like this
..... code here
<script>$("img.lazy").lazy
</body>
</html>
ASKER
This is the link, if you need it. Not sure if it works for you or not
http://dev07.web.newbalance.demandware.net/on/demandware.store/Sites-newbalance_us-Site/undefined/Search-Show?cgid=101000
http://dev07.web.newbalance.demandware.net/on/demandware.store/Sites-newbalance_us-Site/undefined/Search-Show?cgid=101000
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.
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.
ASKER
sorry, i was just testing that's why images are not found. Can you try that link again?
ASKER
>>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.
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>');
...
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( );}</scrip t>');
dolazyload();
$("body").append('<script>
dolazyload();
ASKER
i can try it.