I need to download and display a large image in an img tag.
Since the image is not Progressive JPEG, it will render as it downloads.
Is there a way to show a low-resolution version of the image while it fetches from the server using only CSS or an HTML property?
If you have any ideas on how to achieve this, please let me know!
Check out this example: http://jsfiddle.net/hncajo9f/1/
It is not advisable to fetch images using JavaScript as it requires downloading the entire image to create a thumbnail or lower quality version. If your server has PHP support, you can utilize GD to generate a low quality image to display temporarily until the original one loads.
Alternatively, you can link a low quality image in the src attribute and then load the original image lazily. Another option is to use the lowsrc attribute, although browser compatibility may vary.
Take a look at the srcset attribute for responsive images
Responsive Images: Tips and Tricks for Getting Started
<img src="image-1x.jpg" alt="Description of image" srcset="image-2x.jpg 2x, image-3x.jpg 3x">
or
Understanding How 'SRCSET' Attribute Solves Responsive Image Challenges
To display a low-resolution version with specified dimensions and later switch to a high-resolution version without additional server requests, you can use the IMG tag for the low-res version and update the URL programmatically (e.g. using window.onload event). If you set a data URI for the low-res image, it saves an extra fetch.
<img
realurl='http://upload.wikimedia.org/wikipedia/commons/4/43/Very_Large_Array,_2012.jpg'
src="data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7"
/>
<script>
function replaceWithHires()
{
var images = document.getElementsByTagName('img');
for (var i = 0; i < images.length; i++) {
if (images[i].realuri) {
images[i].src=images[i].realuri;
}
}
}
if (window.addEventListener) {
window.addEventListener('load', replaceWithHires, false);
} else if (window.attachEvent) {
window.attachEvent('onload', replaceWithHires);
}
I have been working on integrating native HTML 5 drag & drop functionality into my angular application. While I have successfully implemented the drag and dragOver events, I am facing an issue with the drop event not firing as expected. Here is the snipp ...
I'm struggling to find a way to wait for an element to load in a javascript selenium test script. The closest thing I've come across is until.elementLocated, but it seems to throw an immediate exception. Is there a method to delay throwing the " ...
Looking to dynamically generate a JSON Object with the specified structure: { "deleteId":[1,2,3], "pointId":[1,2,3], "update":[ { "what":"mission", "id":1, "value":"adsda" }, { ...
I’ve encountered a troublesome behavior in my projects. Here is a simplified explanation of the issue at hand. I am eager to understand why this occurs and how I can prevent it. I have included Vue in the head section of my website: <script src="http ...
Just getting started with Vue.JS and experimenting with creating two lists of books (read and unread) from a shared object in the global data state. This is my approach - working demo (works like a charm! However, I'm wondering if this is considered ...
Is there a way to change the setting so that when using -webkit-transform: rotateY(180deg), it rotates from either the far left or right edge of the div, similar to how a door swings open? ...
Is there a way to dynamically add a new CSS property to an existing class using JavaScript? Let's say I have a class called .test with some pre-defined styling. How can I append the property color: blue; to this class using JavaScript? const elm ...
Working with JSON data in D3 is proving to be a challenge for me. The file seems to be properly read, as indicated by its appearance when I use console.log, and it appears to be correctly formatted based on the examples I have come across. However, when I ...
After deploying a JavaScript Cloud Function, it shows that the deployment is completed. However, when I check Firebase, the function is not there. Oddly, TypeScript Cloud Functions deploy successfully. I followed all the steps outlined in the original Fir ...
{{ "user": "randomuser", "message": "require assistance" }, { "user": "automated assistant", "message": "do you need any help?" }, { "user": "randomuser", "message": "another inquiry" } I am seeking to extract additional paragraphs ...
I need help with storing selected checklist items as an array in a separate object. I want to only store the names of the checklist items, but I am struggling to figure out how to achieve this. Below is the HTML code: <div ng-app="editorApp" ng-contro ...
I am working with a nested div structure and trying to center the inner content of one div within another. Is it possible to achieve this using CSS? <div id="outer"> bla, bla....... <div id="inner"> <p>Test</p> </div> ...
My directive, known as machineForm, includes a dataService: dataService.getMachineTaxesById($scope.machineId).then(function (response) { $scope.machine.machineTaxes = response.data; }); I am using this directive twice simultaneously. <div class= ...
The express.js website has confused me with contradictory statements regarding error-handling middleware. According to one page, you should define error-handling middleware last, after other app.use() and routes calls. However, another page states that you ...
In the 'App.vue' component, there is a data attribute called 'auth' that indicates whether the user is logged in. If it is empty, the user is not logged in; if it contains 'loggedin', then the user is authenticated. Now, let& ...
When utilizing MUI Autocomplete, the generic value specified in onChange / value is determined by the interface of the object set in the options property. For instance, consider an autocomplete with the following setup: <Autocomplete options={top ...
I'm working on developing a page template that utilizes section headers and dynamically pulled content from a separate database. The current setup of the page resembles the following structure: <tr> <td> <h3> ...
Looking to stack 5 tabs on mobile with the odd tab at the top instead of the bottom? Currently set to 50% width and floated left, but they fill up the top first. <div class="tab-row"> <button class="tab active">A</button> <button ...
Creating a mobile-optimized website using bootstrap 4. Currently struggling to vertically center an element within the available space. The element consists of a title with fixed size, a message, and 2 buttons in a div. Need to ensure it is vertically cent ...
My current challenge involves converting JSON data into an array of Recipe objects. Here is the response retrieved from the API: { "criteria": { "requirePictures": true, "q": null, "allowedIngredient": null, "excluded ...