The picture element and associated features are W3C standard HTML features that allow web developers to deliver an appropriate image to every user depending on a variety of conditions like screen size, viewport size, screen resolution, and more. Picturefill is a JavaScript file (or a polyfill to be more specific) that enables support for the picture element and associated features in browsers that do not yet support them, so you can start using them today!
I'm using the picture element with source's to choose which image to load. And while I can add a load listener, I cannot figure out which image was loaded as the img tag's src attribute and property are both empty, even when loaded!
…
(Pre-emptive strike: If you're tempted to mark this as a duplicate, note that other questions seem to ask "why am I getting this error?" I know why I'm getting this error; I want to know how I can detect the error in my JavaScript code. It only…
I have two images, one is 1000 x 800 px ("large"), and one is 200 x 200 px ("small").
I want to use srcset / sizes / picturefill to display the small image when the screen is less than or equal to 500 CSS pixels wide, and the large image…
I'm working on a WP site with some promotion / advert sliders with a Google Analytics click event. Works great, now I want to serve the right image on the right resolution.
I'm using picturefill for serving the images. Works fine while hardcoded, so…
I'm using Bootstrap with Responsive Images. I want to optimize load times by offering multiple image sizes to browsers. According to this article, a plain approach with srcset like this is good for letting the browser pick the optimal image…
I am facing an issue with "picture" element in React, particularly with safari browser.
Safari is always fetching image from "img" element src along with the image from appropriate "source" element based on media attribute.
This seem to work fine in…
I have a need to re-use the rendered image of a picture element. Is there a direct way to use javascript to access the image file path rendered by chrome/opera without having to replicate the logic that picturefill completes.
I want to use Picturefill + React + React Router (Also using Webpack).
Context: There is no isomorphic architecture yet so the data is fetched after initial page load (Route change).
…Because of this the render method is being called twice.
Once…
Original Issue for Posterity (see updates)
I've got an Angular.js website I'm building out to be responsive. I wanted to use separate resolution images for different browser widths as well. So, I stumbled upon Picturefill.js, which seems like it…
I'm trying to get lazyloading with lazysizes and picturefill to work.
The lazyloading itself works if I just use a basic image:
If I check the network tab in chrome, I can see that the…
The page loads without any of the images displaying on IE11 only, but refreshes them accordingly when we resize the browser intermittently (1/3 loads). We cannot replicate this with any of the other browsers. srcset works fine by itself with static…
I have been using the following markup for a while:
This works quite perfectly with picturefill (http://scottjehl.github.io/picturefill/) and doesn't give…
This works quite perfectly with picturefill (http://scottjehl.github.io/picturefill/) and doesn't give…