How to do lazy loading image with srcset? - javascript

I'm using slick.js to build a carousel. However, even though I change the attribute from src to data-lazy the images still get loaded before I scroll to that image. I suspect that it's because I have srcset tag in in my image. My question is how to prevent browser to load responsive image or how to do lazy-loading for responsive images properly.
This is the sample of my img tag
<img data-lazy="better_me.jpg" srcset="better_me.jpg 400w, better_me.jpg 200w" class="avatar photo avatar-200" alt="better_me" width="200" height="200" sizes="(min-device-resolution: 1.6) 400px, 200px">

lazySizes is just working fine. You need to alter your markup into something like this however.
<img data-src="better_me.jpg" data-srcset="better_me2.jpg 400w, better_me.jpg 200w" class="avatar photo avatar-200 lazyload" data-sizes="auto" alt="better_me" width="200" height="200" />
Note srcset is changed to data-srcset and data-lazy is changed to data-src. Additionally you must add the class lazyload.
Your sizes attribute didn't made too much sense. Maybe you want to use x descriptors instead? Or simply use sizes="200px"? I don't know. I simply switched it to data-sizes="auto", so it gets automatically calculated for you. (But in that case the image dimension has to be computable before the image is loaded.)
lazySizes indeed loads images before they get in view. This is a big improvement for user experience. A user, who scrolls something into view doesn't want to wait then. A lazyloader that starts downloading an image after it is already in view disrupts the user experience.
One nice thing about lazySizes is that this lazy loader checks whether the browser is currently heavily downloading and decides on this fact, whether it only downloads in view images or to also preload near view images.
But if you don't want this you can control this by setting the lazySizes' expand and expFactor options.

I recommend responsivelyLazy. The implementation is SEO-friendly and does not mess your HTML code. Here is a snippet:
<div class="responsively-lazy" style="padding-bottom:68.44%;">
<img
alt=""
src="images/2500.jpg"
srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
data-srcset="images/400.jpg 400w, images/600.jpg 600w, images/800.jpg 800w, images/1000.jpg 1000w, images/1500.jpg 1500w, images/2000.jpg 2000w"
/>
As you can see the value in the src attribute is not modified.
Read more at http://ivopetkov.com/b/lazy-load-responsive-images/

Usually, to implement lazy loading in HTML, instead of src or srcset attributes, we use data-src or data-srcset so that browser does not load images during speculative parsing. Later on, when Javascript is executed, and the user has scrolled near the image element, we load the actual image and update the src or srcset attribute’s value.
Two very popular lazy loading libraries lazysizes and vanilla-lazyload support responsive images out of the box.
Here are a few examples of using lazysizes.
Lazy loading responsive images in srcset and sizes
<img
sizes="(min-width: 1000px) 930px, 90vw"
data-srcset="small.jpg 500w,
medium.jpg 640w,
big.jpg 1024w"
data-src="medium.jpg"
class="lazyload" />
Using low quality placeholder in lazy loading
<img
src="low-quaity-placeholder.jpg"
sizes="(min-width: 1000px) 930px, 90vw"
data-srcset="small.jpg 500w,
medium.jpg 640w,
big.jpg 1024w"
data-src="medium.jpg"
class="lazyload" />
Lazy loading images in picture element
<picture>
<source
data-srcset="500.jpg"
media="(max-width: 500px)" />
<source
data-srcset="1024.jpg"
media="(max-width: 1024px)" />
<source
data-srcset="1200.jpg" />
<img src="fallback-image.jpg"
data-src="1024.jpg"
class="lazyload"
alt="image with artdirection" />
</picture>
You can learn more about responsive images from this guide - https://imagekit.io/responsive-images

Related

Make srcset attribute work for Internet Explorer in broken HTML tag

I have this broken img tag and it works fine in Chrome and Edge browser. It loads all the images even though there is something wrong with the src attribute.
<a href="https://www.prikkabelled.nl/feestverlichting-voor-de-achtertuin/">
<img src="<img width="806" height="605" src="https://www.prikkabelled.nl/wp-content/uploads/Feestverlichting-voor-in-de-achtertuin.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" srcset="https://www.prikkabelled.nl/wp-content/uploads/Feestverlichting-voor-in-de-achtertuin.jpg 806w, https://www.prikkabelled.nl/wp-content/uploads/Feestverlichting-voor-in-de-achtertuin-152x114.jpg 152w, https://www.prikkabelled.nl/wp-content/uploads/Feestverlichting-voor-in-de-achtertuin-768x576.jpg 768w, https://www.prikkabelled.nl/wp-content/uploads/Feestverlichting-voor-in-de-achtertuin-253x190.jpg 253w, https://www.prikkabelled.nl/wp-content/uploads/Feestverlichting-voor-in-de-achtertuin-506x380.jpg 506w, https://www.prikkabelled.nl/wp-content/uploads/Feestverlichting-voor-in-de-achtertuin-600x450.jpg 600w, https://www.prikkabelled.nl/wp-content/uploads/Feestverlichting-voor-in-de-achtertuin-200x150.jpg 200w" sizes="(max-width: 806px) 100vw, 806px" />
</a>
However, Internet Explorer refuses to loads the images. I know this should be fixed at the source, but I am not responsible for that.
Is there some kind of frontend fix we can apply so that the images will load in IE?
I have tried removing the src attribute all together but to no avail
jQuery( "img.attachment-post-thumbnail" ).removeAttr('src');
Your HTML is broken. It is not correct to nest img tags. If you can't fix the terrible HTML, maybe try some js to pull the url out of the malformed src attribute of the first tag??
$('a img').each(function(){
$(this).parents('a').html($(this).attr('src'))
})

picture element srcset responsive image rollovers

I am trying to figure out how to apply an image rollover effect to the picture element in a responsive website.
The question is can an image rollover be applied the scrset attribute in the picture tag?
Working example img tag with javascript rollover effect
<img src="media/images/feature-films/tmbs/zen-zero.jpg"
onmouseover="this.src='media/images/feature-films/tmbs/zen-zero-ro.jpg'"
onmouseout="this.src='media/images/feature-films/tmbs/zen-zero.jpg'"
alt=""/>
Not working example of picture element with javascript rollover effect
<picture>
<source srcset="media/images/feature-films/tmbs/zen-zero-large.jpg"
onmouseover="this.src='media/images/feature-films/tmbs/zen-zero-large-ro.jpg'"
onmouseout="this.src='media/images/feature-films/tmbs/zen-zero.jpg'"
media="(min-width: 880px)">
<source srcset="media/images/feature-films/tmbs/zen-zero-small.jpg" media="(max-width: 478px)">
<source srcset="media/images/feature-films/tmbs/zen-zero-medium.jpg">
<!-- fall back -->
<img srcset="media/images/feature-films/tmbs/zen-zero-medium.jpg" alt="">
</picture>
Does anyone have any suggestions hoe to achieve a rollover effect on the picture tag using the srcset?
The web page has about 12 responsive images that need a rollover effect.
Changing src/srcset is not optimal, even for a single img, since it can abort the download of the image if you hover it or leave it before the download is complete.
I think I would do one of these:
Clone the picture with cloneNode(true) and rewrite the URLs of the clone. When the original picture element receives a mouseover event, replace it with the clone. When the clone receives a mouseout event, replace it with the original.
Duplicate the picture in the markup, with the second one representing the hovered image. The second picture has a hidden attribute set. Toggle the hidden attribute on both elements as appropriate.
In the future, it should be possible to toggle the image with CSS using something like img:hover { content:image-set(...); }.
HTML:
<picture id="zen">
<source class="large" srcset="media/images/feature-films/tmbs/zen-zero-large.jpg" media="(min-width: 880px)">
<source srcset="media/images/feature-films/tmbs/zen-zero-small.jpg" media="(max-width: 478px)">
<source srcset="media/images/feature-films/tmbs/zen-zero-medium.jpg">
<!-- fall back -->
<img srcset="media/images/feature-films/tmbs/zen-zero-medium.jpg" alt="">
</picture>
jQuery:
$(document).ready(function() {
$('#zen').on('mouseover', function () {
$(this).find('.large').attr('srcset', 'media/images/feature-films/tmbs/zen-zero-large-ro.jpg');
console.log('mouse over');
})
$('#zen').on('mouseout', function () {
$(this).find('.large').attr('srcset', 'media/images/feature-films/tmbs/zen-zero-large.jpg');
console.log('mouse out');
})
});

Can I call multiple tracking pixels with an image pixel?

Can I call mutiple tracking pixels with an image pixel?
My main tracking pixel would be -->
<img src="http://domain.com/pixel/123" alt="" style="height:1px;width:1px;border:0 none" />
However, if I do mod_rewrite, could I also call the other pixels in the phph file?
Basically, I can place only one tracking pixel, but would need to call all the pixels from below.
<img src="http://domain.com/pixel/123" alt="" style="height:1px;width:1px;border:0 none" />
<img src="http://domain1.com/pixel/232" alt="" style="height:1px;width:1px;border:0 none" />
<img src="http://domain2.com/pixel/745" alt="" style="height:1px;width:1px;border:0 none" />
<img src="http://domain3.com/pixel/478" alt="" style="height:1px;width:1px;border:0 none" />
<img src="http://domain4.com/pixel/894" alt="" style="height:1px;width:1px;border:0 none" />
Also, for the task, I can' use server to server tracking or iframe tracking. So I would need a way to load the pixels from above in one file.
You're loading 5 different resources (tracking pixels) from 5 different domains, so you need the client to do the 5 requests: no server-side stuff will work (server will only have HTTP headers for "domain.com", and no for "domain*.com").
You may use CSS with 5 background image layers:
external, loaded through <link rel="stylesheet" type="text/css" href="..."/>
internal with <style>...</style>
inside a style attribute)
Example with style attribute:
<div style="background-image: url('http://domain.com/pixel/123'), url('http://domain1.com/pixel/232'), url('http://domain2.com/pixel/745'), url('http://domain3.com/pixel/478'), url('http://domain4.com/pixel/894');">&#xnbsp;</div>
If CSS is not enabled, tracking won't work.
You can put the style attribute on an existing element.
There is no other way apart (edit in case I've forget some):
Multiple <img.../> tags
CSS background-image: url()...;
Multiple <iframe...></iframe>
Multiple <link.../> (then "tracking pixels" become "tracking CSS/external resource")
Javascript loading (XMLHttpRequest or others ways to load resources)

How to put the ALT-value of an image into a variable in javascript or jquery

I’ve made a cardspread program that is based on the source of the image. It works allright, but it is loading slowly, because now 78 different cards are loaded. I like to speed up the loading and I thought I needed an extra item per DIV. So I added an ALT-tag to each image. Like this:
<div id="kaart1">
<alt=kaart14.jpg>
<img src="images/kaart1.jpg" width="110" height="180" onclick="showDiv(event)>
</alt=kaart14.jpg>
</div>
Now I need only 1 image to load 78 times, which is faster. The problem which I am facing now is that I want to read the alt value into a variable (in this case: kaart14.jpg).
I’ve tried :
$('.status').click(function() {
var status = $(this).attr('alt');
});
But that stays empty. Does anyone have a suggestion how to solve this in Javascript or jQuery?
First, there is no <alt> tag. It is used as alternative to <img>. The value is displayed if the image is not loaded.
It is just plain text. If you put a url there, it will just display the url and not the image itself.
Eg:
<img src="myphoto.jpg" alt="This is my photo">
There is no performance gain if you use alt or not, but you definitely SEO
Your alt attribute should be like
<div id="kaart1">
<img src="images/kaart1.jpg" alt="kaart Image" width="110" height="180" onclick="showDiv(event)>
</div>
alt is an attribute of the img tag,its not a tag itself.And as #Bergi said,the alt attribute will not be an another image.It may be the description.

Image thumbnail is not loading and onmousehover my images move up when hovering over an image?

?I am having an issue with a website i uploaded to test. They all work work fine when they are checked locally in Dreamweaver cs6 but when uploaded they do this, Roll over the images you will see the problem, when hovering over Texas longhorn image there is a problem and the Michigan state image isn't loading Anyone see my error.
Here is the code that matters Thanks for any help And the link to the site page http://odintest.co.nf/product_select.html
<script type="text/javascript">
function changeImage(a) {
document.getElementById("img").src=a;
}
</script>
<div id="main_img">
<img id="img" src="images/placeholder.jpg"/>
</div>
<div id="thumb_img">
<img src='images/notredamelogo.JPG' width="200" height="150" onmouseover='changeImage("images/notredame.JPG");'>
<img src="images/ohiostatelogo.jpg" onmouseover='changeImage("images/ohiostate.jpg");'>
<img src='images/michiganstatelogo.jpg' onmouseover='changeImage("images/michiganstate.jpg");'>
<img src='images/floridagatorslogo.jpg' onmouseover='changeImage("images/floridagators.jpg");'>
<img src='images/texaslonghornslogo.jpg' onmouseover='changeImage("images/texaslonghorns.jpg");'>
</div>
I don't know what problem you're describing, but I'm guessing a hover delay. Use a javascript preloader or load them in a div with styles along the lines of {position: absolute; left: -999em;} to keep them offscreen. This makes the images available immediately on hover, where normally you'd see a delay while they're downloaded.
The image at http://odintest.co.nf/images/texaslonghorns.jpg doesn't seem to exist on the server.
Well I see 2 issues.
For me the "notredamelogo.JPG" did not load. Probably because of "JPG". Try "jpg" instead.
Main image does not load for texaslonghorns. That might be because the image does not exist in that directory and/or the image name or extension is not right.

Categories