I am using "background: #BDBDBD url(image.png) top left no-repeat" this css property for two div elements which has width and height set. On clicking a button I am changing the width of both the nested divs dynamically by making the function run continuously with the help of setInterval(). The image is not loading in chrome but it works fine in firefox and IE .. Many searches convey that using background image in chrome is not working but none of those solutions seems to work.
<div id="boxes">
<div id="dialog" class="window" style="overflow: auto">
<div id="progressBar" class="meter-wrap" style="display: block;position: relative; margin: auto;">
<div class="meter-value" style="background-color: #05C; width: 40%">
<div class="meter-text">
Loading...
</div>
</div>
</div>
<div class="meter-text-message">
Loading...
</div>
</div>
CSS:
.meter-wrap, .meter-value, .meter-text {
width: 155px; height: 30px;
}
.meter-wrap, .meter-value {
background: #bdbdbd url('/sf-images/tracker/inline_progress_bar.png') top left no-repeat;
}
js code:
function setProgressBar() {
var pgBar = jQuery("#progressBar");
pgBar.show();
running = true;
var inter = null;
function run() {
pgBar.find(".meter-value").css("width", progress + "%");
pgBar.find(".meter-text").text(progress + "%");
if (progress == 100) {
jQuery(".meter-text-message").html("Complete");
clearInterval(inter);
running = false;
}
}
inter = setInterval(run, 50);
}
Found that the image is not loading for first time, I made the div element visible with the image as background by another method. After that , when I execute the above js method image loads properly.
Related
I use bootstrap. I want the user to be able to choose the canvas size while keeping the design screen responsive within the div.
<div class="row">
<div class="col-xs-2 col-sm-2" id="border">content left</div>
<div class="col-xs-6 col-sm-6" id="border">
Width <input type="number" class="form-control"><br>
Height <input type="number" class="form-control"><br>
canvas
<canvas id="canvas" width="500" height="300">
</canvas>
</div>
<div class="col-xs-2 col-sm-2" id="border">content right</div>
How can I limit the size of the canvas to the size of the div?
I do not know if it will be necessary to use JavaScript.
Edit
It should be taken into account that the width and height values are entered by the user and the canvas must be in div proportional in size
https://jsfiddle.net/1a11p3ng/2/
You can have a responsive canvas in 3 short and simple steps:
Remove the width and height attributes from your <canvas>.
<canvas id="responsive-canvas"></canvas>
Using CSS, set the width of your canvas to 100%.
#responsive-canvas {
width: 100%;
}
Using JavaScript, set the height to some ratio of the width.
var canvas = document.getElementById('responsive-canvas');
var heightRatio = 1.5;
canvas.height = canvas.width * heightRatio;
To change width is not that hard. Just remove the width attribute from the tag and add width: 100%; in the css for #canvas
#canvas{
border: solid 1px blue;
width: 100%;
}
Changing height is a bit harder: you need javascript. I have used jQuery because i'm more comfortable with.
you need to remove the height attribute from the canvas tag and add this script:
<script>
function resize(){
$("#canvas").outerHeight($(window).height()-$("#canvas").offset().top- Math.abs($("#canvas").outerHeight(true) - $("#canvas").outerHeight()));
}
$(document).ready(function(){
resize();
$(window).on("resize", function(){
resize();
});
});
</script>
You can see this fiddle: https://jsfiddle.net/1a11p3ng/3/
EDIT:
To answer your second question. You need javascript
0) First of all i changed your #border id into a class since ids must be unique for an element inside an html page (you can't have 2 tags with the same id)
.border{
border: solid 1px black;
}
#canvas{
border: solid 1px blue;
width: 100%;
}
1) Changed your HTML to add ids where needed, two inputs and a button to set the values
<div class="row">
<div class="col-xs-2 col-sm-2 border">content left</div>
<div class="col-xs-6 col-sm-6 border" id="main-content">
<div class="row">
<div class="col-xs-6">
Width <input id="w-input" type="number" class="form-control">
</div>
<div class="col-xs-6">
Height <input id="h-input" type="number" class="form-control">
</div>
<div class="col-xs-12 text-right" style="padding: 3px;">
<button id="set-size" class="btn btn-primary">Set</button>
</div>
</div>
canvas
<canvas id="canvas"></canvas>
</div>
<div class="col-xs-2 col-sm-2 border">content right</div>
</div>
2) Set the canvas height and width so that it fits inside the container
$("#canvas").outerHeight($(window).height()-$("#canvas").offset().top-Math.abs( $("#canvas").outerHeight(true) - $("#canvas").outerHeight()));
3) Set the values of the width and height forms
$("#h-input").val($("#canvas").outerHeight());
$("#w-input").val($("#canvas").outerWidth());
4) Finally, whenever you click on the button you set the canvas width and height to the values set. If the width value is bigger than the container's width then it will resize the canvas to the container's width instead (otherwise it will break your layout)
$("#set-size").click(function(){
$("#canvas").outerHeight($("#h-input").val());
$("#canvas").outerWidth(Math.min($("#w-input").val(), $("#main-content").width()));
});
See a full example here https://jsfiddle.net/1a11p3ng/7/
UPDATE 2:
To have full control over the width you can use this:
<div class="container-fluid">
<div class="row">
<div class="col-xs-2 border">content left</div>
<div class="col-xs-8 border" id="main-content">
<div class="row">
<div class="col-xs-6">
Width <input id="w-input" type="number" class="form-control">
</div>
<div class="col-xs-6">
Height <input id="h-input" type="number" class="form-control">
</div>
<div class="col-xs-12 text-right" style="padding: 3px;">
<button id="set-size" class="btn btn-primary">Set</button>
</div>
</div>
canvas
<canvas id="canvas">
</canvas>
</div>
<div class="col-xs-2 border">content right</div>
</div>
</div>
<script>
$(document).ready(function(){
$("#canvas").outerHeight($(window).height()-$("#canvas").offset().top-Math.abs( $("#canvas").outerHeight(true) - $("#canvas").outerHeight()));
$("#h-input").val($("#canvas").outerHeight());
$("#w-input").val($("#canvas").outerWidth());
$("#set-size").click(function(){
$("#canvas").outerHeight($("#h-input").val());
$("#main-content").width($("#w-input").val());
$("#canvas").outerWidth($("#main-content").width());
});
});
</script>
https://jsfiddle.net/1a11p3ng/8/
the content left and content right columns will move above and belove the central div if the width is too high, but this can't be helped if you are using bootstrap. This is not, however, what responsive means. a truly responsive site will adapt its size to the user screen to keep the layout as you have intended without any external input, letting the user set any size which may break your layout does not mean making a responsive site.
The object-fit CSS property sets how the content of a replaced element, such as an img or video, should be resized to fit its container.
Magically, object fit also works on a canvas element. No JavaScript needed, and the canvas doesn't stretch, automatically fills to proportion.
canvas {
width: 100%;
object-fit: contain;
}
<div class="outer">
<canvas id="canvas"></canvas>
</div>
.outer {
position: relative;
width: 100%;
padding-bottom: 100%;
}
#canvas {
position: absolute;
width: 100%;
height: 100%;
}
extending accepted answer with jquery
what if you want to add more canvas?, this jquery.each answer it
responsiveCanvas(); //first init
$(window).resize(function(){
responsiveCanvas(); //every resizing
stage.update(); //update the canvas, stage is object of easeljs
});
function responsiveCanvas(target){
$(canvas).each(function(e){
var parentWidth = $(this).parent().outerWidth();
var parentHeight = $(this).parent().outerHeight();
$(this).attr('width', parentWidth);
$(this).attr('height', parentHeight);
console.log(parentWidth);
})
}
it will do all the job for you
why we dont set the width or the height via css or style? because it will stretch your canvas instead of make it into expecting size
this seems to be working :
#canvas{
border: solid 1px blue;
width:100%;
}
One of the best possible way to do this without even using JavaScript is to just put that canvas inside a div tag and then display block (Note: width:100%; height:100%; is completely optional).
Run the snippet below to see how it works.....
.container {
display: block;
margin: auto;
height: auto;
}
#canvas {
width: 100%;
height: 100%;
border: 1px solid black;
}
<div class="container">
<!-- width and height are set just to show you it actually works-->
<canvas id="canvas" width=864 height=480></canvas>
</div>
There's a better way to do this in modern browsers using the vh and vw units.
vh is the viewport height.
So you can try something like this:
<style>
canvas {
border: solid 2px purple;
background-color: green;
width: 100%;
height: 80vh;
}
</style>
This will distort the aspect ration.
You can keep the aspect ratio by using the same unit for each. Here's an example with a 2:1 aspect ratio:
<style>
canvas {
width: 40vh;
height: 80vh;
}
</style>
try using max-width: 100%; on your canvas.
canvas {
max-width: 100%;
}
Hi I know this post has been going on for a while, but I had a very similar problem with my canvas. like mentioned as the viewport gets resized and so does the elements within the window. This can be done using css, however it doesnt quite apply to the elements within the canvas. Now if your canvas context is 2D this is the solution that works for me...
This can be used as a method.
class ParentObject{
constructor()
/**
* #this this._width - Private width variable that would store the size of the window width
*/
this._width = Number();
/**
* #this this._height - Private Height variable that would store the height of the window
*/
this._height= Number();
/**
* Calls the getCanvasDimensions method
*/
this.getCanvasDimensions();
//Getting the Width and Height as soon as the Window loads
window.addEventListener('load',()=>{
this.getCanvasDimensions()
})
//As the window is resized we are getting the new Canvas Dimensions
window.addEventListener('resize',()=>{
this.getCanvasDimensions();
getCanvasDimensions() {
// Width is determined by the css value for the viewport width this is then respected by the device pixel ratio. This is then used to set the canvas.width value
this._width = Math.round((Number(getComputedStyle(canvas).getPropertyValue('width').slice(0,-2))/devicePixelRatio) * devicePixelRatio);
//Setting the canvas width
canvas.width = this._width
// height is determined by the css value for the viewport height this is then respected by the device pixel ratio. This is then used to set the canvas.height value
this._height = Math.round((Number(getComputedStyle(canvas).getPropertyValue('height').slice(0,-2))/devicePixelRatio) * devicePixelRatio);
//Setting the canvas height
canvas.height = this._height
}
get width(){
//This sets the width to the private _width value
return this._width
}
get height(){
//This sets the height to the private _height value
return this._height
}
As a function on the global scope:
let width,height
function responsiveCanvas(){
let w = Math.round((Number(getComputedStyle(canvas).getPropertyValue('width').slice(0,-2))/devicePixelRatio) * devicePixelRatio);
width = canvas.height = w;
let h = Math.round((Number(getComputedStyle(canvas).getPropertyValue('height').slice(0,-2))/devicePixelRatio) * devicePixelRatio);
height = canvas.height = h;
}
window.addEventListener('load',responsiveCanvas)
window.addEventListener('resize',responsiveCanvas)
Then just use the width and height variables to reference the sizes.
Anyways I hope that this helps someone out.
Try changing the width of the canvas to be equal to it's parent element.
<template>
<span class="Wrapper">
<canvas id="myChart" ></canvas>
</span>
</template>
<script>
const ctx = document.getElementById('myChart');
ctx.width = ctx.parentElement.offsetWidth;
ctx.height = ctx.parentElement.offsetHeight;
</script>
First of all many thanks for this page, it has been helping me a lot! But at this point I have a question where I cannot find an answer that fits what I want (maybe it cannot be achieved the way I am doing it).
I want to have a link with a static image, and when the user moves the cursor over the link I want an animated gif to play (the anim gif is set to not loop, so it only plays once). And when the user moves out go back to the static image and if the user goes in again, the gif should play again from the beginning.
I am using html5 combined with CSS to create my web (which I am using to learn at the same time). I did programing in the past with C++ and similar, but never on a web context.
So far this is what I tried:
CSS:
.img-acu
{
float: left;
width: 450px;
height: 264px;
background:transparent url("acu.gif") center top no-repeat;
}
.img-acu:hover
{
background-image: url("acusel.gif");
}
HTML:
But nothing at all appears :(
The weird thing is, I used this same example with two static images (png format) and it worked fine, but for some reason with the animated gif it doesn't want to work.
The I tried this:
CSS:
#test
{
width: 450px;
height: 264px;
background-image: url("acu.gif");
background-repeat: no-repeat;
background-position: left;
margin-left: 75px;
}
#test:hover
{
background-image: url("acusel.gif");
}
HTML:
<div id="test"></div>
And that works perfectly, it is just the link doesn't work and when the animated gif reaches the last frame, it never resets (unless I reload the page).
Do you know if there is any way to achieve this properly in HTML5 + CSS? should I use javascript or php?
I would really appreciate any help!
Thanks a lot!!
That can be achieved by use a static image and your gif image(Hey, that how 9gag do it!)
A basic script could be somthing like that:
<img id="myImg" src="staticImg.png" />
<script>
$(function() {
$("#myImg").hover(
function() {
$(this).attr("src", "animatedImg.gif");
},
function() {
$(this).attr("src", "staticImg.jpg");
}
);
});
</script>
Hopefully this simple way can help someone:
<img class="static" src="https://lh4.googleusercontent.com/-gZiu96oTuu4/Uag5oWLQHfI/AAAAAAAABSE/pl1W8n91hH0/w140-h165-no/Homer-Static.png"><img class="active" src="https://lh4.googleusercontent.com/i1RprwcvxhbN2TAMunNxS4RiNVT0DvlD9FNQCvPFuJ0=w140-h165-no">
Then add the following CSS:
.static {
position: absolute;
background: white;
}
.static:hover {
opacity: 0;
}
This should hopefully help some people. I got the code from a codepen and decided some stack overflow users may find it helpful. If you would like to view the original codepen, visit here: CodePen
The approach you took did not work because CSS will not change the background on < a >. Solving this can be done entirely with vanilla JS + HTML. The trick is to place:
<div class="img-acu">
inside of:
(insert here)
All that's left is to have CSS target the div. That way, you can set the static background, which then changes on :hover
Here's a fiddle showing this in action (or you can fiddle with this: https://jsfiddle.net/lyfthis/yfmhd1xL/):
.img-acu
{
float: left;
width: 250px;
height: 132px;
background:transparent url("https://i.imgur.com/7r91PY3.jpeg") center top no-repeat;
background-size: 125%;
}
.img-acu:hover
{
background-image: url("https://media.giphy.com/media/QMkPpxPDYY0fu/giphy.gif");
}
<!-- Don't do this:
-->
<div>
<div>Click on image below to go to link:</div>
<a href="https://www.google.com" title="ACU Project link">
<div class="img-acu"></div>
</a>
</div>
Try this if you are OK to use canvas:
<!DOCTYPE html>
<html>
<head>
<style>
.wrapper {position:absolute; z-index:2;width:400px;height:328px;background-color: transparent;}
.canvas {position:absolute;z-index:1;}
.gif {position:absolute;z-index:0;}
.hide {display:none;}
</style>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script>
window.onload = function() {
var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
var img = document.getElementById("gif");
ctx.drawImage(img, 0, 0);
}
$(document).ready(function() {
$("#wrapper").bind("mouseenter mouseleave", function(e) {
$("#canvas").toggleClass("hide");
});
});
</script>
</head>
<body>
<div>
<img id="gif" class="gif" src="https://www.macobserver.com/imgs/tips/20131206_Pooh_GIF.gif">
<canvas id="canvas" class="canvas" width="400px" height="328px">
Your browser does not support the HTML5 canvas tag.
</canvas>
<div id="wrapper" class="wrapper"></div>
</div>
</body>
</html>
I have a background image that I'm maintaining its aspect ratio like so (see fiddle):
.wrapper{
width: 100%;
max-width: 703px;
}
.greeting {
background-image: url('ANIV_ARG_CELEB.jpg');
background-repeat: no-repeat;
background-size:contain;
background-position:left;
position: relative;
min-width: 300px;
min-height: 300px;
width: 100%;
padding: 34.6% 0 0 0;
}
<div class="wrapper">
<div class="greeting texttop" style="background-image: url('top/ANIV_BOW.jpg');">
<div class="message">
<form action="" method="post">
<textarea name="text"></textarea>
</form>
</div>
</div>
</div>
This works great only now I'm trying to place a textbox within the div so that it stays at the top of the image on all devices.
This setup works well for mobile, placing the textbox at the top, however as the screen size grows the textbox becomes lower and lower.
Perhaps this can't be done in a fluid form and needs media queries?
If I understood correctly, you are trying to move the textbox in relative to the image position. The image can be transformed to Landscape or portrait based on vertical or horizontal resize of the window. This is not possible using just css. This can be solved using javascript if you know the dimensions of the Image.
In your case, the image dimensions are 774 X 543. So, here is the solution for that:
Javascript
$(function () {
var w = 774;
var h = 543;
function setMessageBox() {
var greeting = $('.greeting');
var height = greeting.height();
var width = greeting.width();
console.log(height);
if (width > (w / h) * height) {
$('.greeting.texttop .message').css('top', '0px');
} else {
var vHeight = (h * width) / w;
var topSpace = (height - vHeight) / 2;
$('.greeting.texttop .message').css('top', topSpace.toFixed(2) + 'px');
}
}
setMessageBox();
window.onresize = setMessageBox;
});
Working Fiddle
The affect I'm going for is something I can only compare to Google+ top navigation effect and through some parallax into that. That is, when you scroll down, the search bar disappears and your left with a small "toolbar". I found some jQuery to help me out and I will mess with after I figure this out.
What I'm trying to do first, is get a background image to scroll from below the bar (see the jfiddle) and scroll up to the bar where it will eventually stay put. This is what I've got so far:
<section id="account-bar" class="shelf navbar-fixed-top">
<div class="navbar-header">
more...
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Links</li>
</ul>
</div>
</section>
with the associated css:
section#account-bar {
background-color:#111;
color:#ccc;
font-size:1.1em;
height:3.6em;
line-height:3.4em;
text-align:right
}
section#account-bar:after {
content:'';
width:267px;
height:46px;
background:url('http://lorempixel.com/267/46/') no-repeat 0 0 scroll;
background-size:267px 46px;
top:0;
left:0;
position:absolute;
}
EDIT: Here's that jsFiddle
Although this is not currently possible in pure CSS, by using window.onscroll, scrollTop, and a couple if statements, you can create a lovely state change effect that is similar to what you're looking for
Looking at the Google Plus page, there was some content above the navigation. As a result, I set up my HTML as follows
<div class='topContent'>Top Content</div>
<nav>
<div class='googleSlide'></div> <!--The image that slides in from the left-->
<div class='navContent'>Nav bar content</div> <!-- Everything else in nav -->
</nav>
Here are my important CSS lines to get it functioning
.topContent { height:75px; /* Arbitrary but necessary value */ }
nav { height:44px; width:100%; }
nav div { float:left; }
.googleSlide {
background-image: url(//ssl.gstatic.com/s2/oz/images/sprites/ribbon-nav-1x-69dd561f4c55d6702aadda4e3b4ce787.png);
background-position:0 -100px;
height: 44px; /* More arbitrary but necessary values */
width: 44px;
margin-left:-55px;
transition: all 0.200s; /* To smooth the transition to the new state */
}
And finally, we have the javascript that gets it all working
window.onscroll = function() { // Fires whiles the page scrolls
var navigation = document.getElementsByTagName('nav')[0],
slide = document.getElementsByClassName('googleSlide')[0];
// Conditional to check whether scroll is past our marker, second conditional
// to make sure that it doesn't keep firing when scrolling inside of the range
if(document.body.scrollTop > 75 && navigation.style.background != 'white') {
navigation.style.background = 'white';
navigation.style.border = '1px solid black';
navigation.style.position = 'fixed';
slide.style.marginLeft = '0px';
}
// Same as above but toggles back to the original state
if(document.body.scrollTop < 75 && navigation.style.background != 'grey') {
navigation.style.background = 'grey';
navigation.style.border = 'none';
slide.style.marginLeft = '-55px';
navigation.style.position = 'static';
navigation.style.top = '0px';
}
}
Demo
I'm not sure exactly what you mean by scrolling the background, but a similar approach as this one can get you what you want
I have a few images on my page. I'm finding that the page starts to render before the images have been loading (which is good), but that the visual effect is not great. Initially the user sees this:
--------hr--------
text
Then a few milliseconds later the page jumps to show this:
--------hr--------
[ ]
[ image ]
[ ]
text
Is there a simple way that I can show a grey background image of exactly the width and height that the image will occupy, until the image itself loads?
The complicating factor is that I don't know the height and width of the images in advance: they are responsive, and just set to width: 100% of the containing div. This is the HTML/CSS:
<div class="thumbnail">
<img src="myimage.jpeg" />
<div class="caption">caption</div>
</div>
img { width: 100% }
Here's a JSFiddle to illustrate the basic problem: http://jsfiddle.net/X8rTB/3/
I've looked into things like LazyLoad, but I can't help feeling there must be a simpler, non-JS answer. Or is the fact that I don't know the height of the image in advance an insurmountable problem? I do know the aspect ratio of the images.
Instead of referencing the image directly, stick it within a DIV, like the following:
<div class="placeholder">
<div class="myimage" style="background-image: url({somedynamicimageurl})"><img /></div>
</div>
Then in your CSS:
.placeholder {
width: 300;
height: 300;
background-repeat: no-repeat;
background-size: contain;
background-image: url('my_placeholder.png');
}
Keep in mind - the previous answers that recommend using a div background approach will change the semantic of your image by turning it from an img into a div background. This will result in things like no indexing of these images by a search crawler, delay in loading of these images by the browser (unless you explicitly preload them), etc.
A solution to this issue (while not using the div background approach) is to have a wrapper div to your image and add padding-top to it based on the aspect ratio of the image that you need to know in advance. The below code will work for an image with an aspect ratio of 2:1 (height is 50% of width).
<div style="width:100%;height:0; padding-top:50%;position:relative;">
<img src="<imgUrl>" style="position:absolute; top:0; left:0; width:100%;">
</div>
Of course - the major disadvantage of this approach is that you need to know the aspect ratio of the image in advance.
There is a really simple thing to check before you start looking into lazy-loading and other JavaScript. Make sure the JPEG images you are loading are saved with the 'progressive' option enabled!
This will cause them to load the image iteratively, starting with a placeholder that is low-resolution and faster to download, rather than waiting for the highest resolution data before rendering.
It's very simple...
This scenario allows to load a profile photo that defaults to a placeholder image.
You could load multi CSS background-image into an element. When an avatar photo fails, the placeholder image appears default of div.
If you're using a div element that loads via a CSS background-image, you could use this style:
#avatarImage {
background-image: url("place-holder-image.png"), url("avatar-image.png");
}
<div id="avatarImage"></div>
Feel free to copy this:
<script>
window.addEventListener("load", function () {
document.getElementById('image').style.backgroundColor = 'transparent';
});
</script>
<body>
<image src="example.example.example" alt="example" id="image" style="background-color:blue;">
</body>
I got this from here: Preloader keeps on loading and doesnt disappear when the content is loaded.
Apart from all solutions already mentioned, the last solution would be to hide the document until everything is loaded.
window.addEventListener('load', (e) => {
document.body.classList.add('loaded');
});
body {
opacity: 0;
}
body.loaded {
opacity: 1;
}
<div id="sidebar">
<img src="http://farm9.staticflickr.com/8075/8449869813_1e62a60f01_b.jpg" />
<img src="https://www.nla.gov.au/sites/default/files/pic-1.jpg" />
<img src="https://www.nla.gov.au/sites/default/files/pic-2.jpg" />
<img src="https://www.nla.gov.au/sites/default/files/pic-3.jpg" />
<img src="https://www.nla.gov.au/sites/default/files/pic-4.jpg" />
<img src="https://www.nla.gov.au/sites/default/files/pic-5.jpg" />
<img src="https://www.nla.gov.au/sites/default/files/pic-6.jpg" />
</div>
Or show some animation while everything is loading:
window.addEventListener('load', (e) => {
document.body.classList.add('loaded');
});
.loader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 70px;
height: 70px;
-webkit-animation: spin 2s linear infinite;
/* Safari */
animation: spin 2s linear infinite;
position: absolute;
left: calc(50% - 35px);
top: calc(50% - 35px);
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
body :not(.loader) {
opacity: 0;
}
body .loader {
display: block;
}
body.loaded :not(.loader) {
opacity: 1;
}
body.loaded .loader {
display: none;
}
<div class="loader"></div>
<div id="sidebar">
<img src="http://farm9.staticflickr.com/8075/8449869813_1e62a60f01_b.jpg" />
<img src="https://www.nla.gov.au/sites/default/files/pic-1.jpg" />
<img src="https://www.nla.gov.au/sites/default/files/pic-2.jpg" />
<img src="https://www.nla.gov.au/sites/default/files/pic-3.jpg" />
<img src="https://www.nla.gov.au/sites/default/files/pic-4.jpg" />
<img src="https://www.nla.gov.au/sites/default/files/pic-5.jpg" />
<img src="https://www.nla.gov.au/sites/default/files/pic-6.jpg" />
</div>
The only thing I can think of, to minimize the jump effect on your text, is to set min-height to where the image will appear, I would say - set it to the "shorter" image you know of. This way the jump will be less evident and you won't need to use lazyLoad or so... However it doesn't completely fix your problem.
Here's one naive way of doing it,
img {
box-shadow: 0 0 10px 0 rgba(#000, 0.1);
}
You can manipulate the values, but it creates a very light border around the image that doesn't push the contents. Images can load at whatever time they want, and you get a good user experience.
Here is what I did with Tailwind CSS, but it's just CSS:
img {
#apply bg-no-repeat bg-center;
body.locale-en & {
background-image: url("data:image/svg+xml;utf8,<svg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'><text x='50%' y='50%' style='font-family: sans-serif; font-size: 12px;' dominant-baseline='middle' text-anchor='middle'>Loading…</text></svg>");
}
body.locale-fr & {
background-image: url("data:image/svg+xml;utf8,<svg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'><text x='50%' y='50%' style='font-family: sans-serif; font-size: 12px;' dominant-baseline='middle' text-anchor='middle'>Chargement…</text></svg>");
}
}
You can find the width and height of the images in the developer tools console, for example in Chrome you can click the cursor icon in the developer tools console and when you hover on the page it will highlight all the properties of the elements in the page.
This will help you find the width and height of the images, because if you hover on top of your images it will give you the dimensions of the image and other more properties. You can also make an individual div for each image and make the div relative to the images width and height. You can do it like this:
The main div will contain the images and also the background-div which is below the image.
HTML:
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div class=".mainDiv">
<div class="below"></div>
<img src="https://imgix.bustle.com/uploads/image/2020/2/13/da1a1ca4-95ec-40ea-83c1-4f07fac8b9b7-eqb9xdwx0auhotc.jpg" width="500"/>
</div>
</body>
</html>
CSS:
.mainDiv {
position: relative;
}
.below {
position: absolute;
background: #96a0aa;
width: 500px;
height: 281px;
}
img {
position: absolute;
}
The result will be that .below will be below the image and so when the image has trouble loading the user will instead see the grey .below div. You cannot see the .below div because it is hidden below the image. The only time you will see this is when the loading of the image is delayed. And this will solve all your problems.
I have got a way. But you will need to use JavaScript for it.
The HTML:
img = document.getElementById("img")
text = document.getElementById("text")
document.addEventListener("DOMContentLoaded", () => {
img.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAA1BMVEWIiIhYZW6zAAAASElEQVR4nO3BgQAAAADDoPlTX+AIVQEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADwDcaiAAFXD1ujAAAAAElFTkSuQmCC";
text.innerHTML = "Loaded but image is not";
});
window.onload = function() {
img.src = "https://media.geeksforgeeks.org/wp-content/uploads/20190913002133/body-onload-console.png";
text.innerHTML = "Image is now loaded";
};
#img {
width: 400px;
height: 300px;
}
<hr>
<img id="img" src="https://media.geeksforgeeks.org/wp-content/uploads/20190913002133/body-onload-console.png">
<p>Here is the Image</p>
<p id="text">Not Loaded</p>