<script>
function init() {
var imgDefer = document.getElementsByTagName('img');
for (var i=0; i<imgDefer.length; i++) {
if(imgDefer[i].getAttribute('data-src')) {
imgDefer[i].setAttribute('src',imgDefer[i].getAttribute('data-src'));
} } }
window.onload = init;
</script>
I added it into my existing script sequence (last one):
<script type="text/javascript" language="javascript">
jQuery(document).ready(function($) {
$(".toggle").click(function() {
var $next=$(this).next().toggle(400);
$('.answer').not($next).hide();
});
$('ul.tabs li').click(function(){
var tab_id = $(this).attr('data-tab');
$('ul.tabs li').removeClass('current');
$('.tab-content').removeClass('current');
$(this).addClass('current');
$("#"+tab_id).addClass('current');
})
$(".desc").hide();
$(".desc:first").show(); // THIS LINE IS ADDED!!!
$("h3.open-close").click(function(){
if ($(this).is(".current"))
{
$(this).removeClass("current");
$(this).next(".desc").slideUp(400);
}
else
{
$(".desc").slideUp(400);
$("h3.open-close").removeClass("current");
$(this).addClass("current");
$(this).next(".desc").slideDown(400);
}
});
$(window).scroll(function() {
if ($(this).scrollTop()>0)
{
$('.nextscreen').fadeOut();
$('.arrowsubmenu').fadeOut();
}
else
{
$('.nextscreen').fadeIn();
$('.arrowsubmenu').fadeIn();
}
});
$('#quantity,#apply_time').keyup(function() {
var units = parseInt($("#quantity").val().replace(',', ''));
var seconds = $("#apply_time").val();
var convert = 60;
var total = Math.round (units * seconds / convert / convert);
$("#hours").val(total); // sets the total hours input to the quantity * seconds
});
function init() {
var imgDefer = document.getElementsByTagName('img');
for (var i=0; i<imgDefer.length; i++) {
if(imgDefer[i].getAttribute('data-src')) {
imgDefer[i].setAttribute('src',imgDefer[i].getAttribute('data-src'));
} } }
window.onload = init;
});
</script>
If you are still with me, here are my questions:
Does my code, both HTML and JS look correct? Do I need another closing tag after the last script?
How do I know this actually defers the loading? I know it sounds like a stupid question, but Im not sure how to tell if the images are loading after the page or during as before.
[quote=“dave8794, post:1, topic:228269, full:true”]
2. How do I know this actually defers the loading?[/quote]
Because the window.onload event only occurs after the rest of the page has loaded.
[quote=“dave8794, post:1, topic:228269, full:true”]
I know it sounds like a stupid question, but Im not sure how to tell if the images are loading after the page or during as before.[/quote]
You can investigate the network section of your developer tools. For example, here you can see that your Process-DY icon hasn’t loaded until after the red line, which is when the onload event triggers.
Paul, thank you so much for taking the time to look over my code and explain this! I have never used the Network section, that provides some great insight. Everything you said makes sense and I’m thrilled it works!
Hi Paul, sorry for the late response, i didn’t get your notification. How do I have to update src attribute? I don’t understand. Also, I did get everything working before reading your response. All images deferred fine. Problem is it actually slowed down my page load. Perhaps because I didn’t update the src?
I did use that src attribute in post 1 on all the images. I think my problem was I have those same 5 images used in divs that are only shown on mobile. The duplication of files may have been the problem because i got it all to work once I deferred those mobile divs too. If you recently looked at my source code, the updated src from post 1 is not there, I changed it back because deferring images load was slowing down my page loading which is defeating the purpose. Im sure I was still doing something wrong, I don’t know why it slowed my loading.
Sure, now that the images are deferred, my pageload time has seems to have increased, not sure why. I have tested on Pingdom, GTmetrix, and in Developer Tools > Network.
I suggest that you create several versions of the page and then test them against each other. That way you will have actual metrics that can be used to judge between them.
We need to find out if it’s the onload time or the total load time that is of interest here. If the latter, then the definition of the word “defer” needs to be appreciated…
I thought about that. The deferring is in fact being done on the same page displaying the images. If its the case the script is adding time, its making the purpose of deferring moot.
