Preload all pictures in create-react-app - javascript

I use this to create card game. Now pictures are loaded directly after the rendering of the card component with background-image. Therefore sometimes there are friezes. I want all the pictures to be loaded before showing the main screen using a preloader. Tell me please how to do this. Thank you.
import React from 'react';
import '../styles/Card.css';
const Card = (props) => {
const cardClick = () => {
if(props.status === 'unselected') {
props.onCardClick(props.cardIndex);
}
};
return (
<div className={`card card-${props.cardName} card-${props.status}`} onClick={cardClick}>
<div className="card-inner">
<div className="card-face card-front"></div>
<div className="card-face card-back"></div>
</div>
</div>
);
}
export default Card;
/*Set background to cards*/
.card-0C .card-front {
background: url('../images/cards/0C.png');
background-size: cover;
}
.card-0D .card-front {
background: url('../images/cards/0D.png');
background-size: cover;
}
.card-0H .card-front {
background: url('../images/cards/0H.png');
background-size: cover;
}
.card-0S .card-front {
background: url('../images/cards/0S.png');
background-size: cover;
}
.card-2C .card-front {
background: url('../images/cards/2C.png');
background-size: cover;
}
.card-2D .card-front {
background: url('../images/cards/2D.png');
background-size: cover;
}

Well there are a few ways. I'm gonna try and do my best to explain what you can do.
Use html preload attribute. reference here
The preload value of the link element's rel attribute allows you to
write declarative fetch requests in your HTML head, specifying
resources that your pages will need very soon after loading, which you
therefore want to start preloading early in the lifecycle of a page
load, before the browser's main rendering machinery kicks in. This
ensures that they are made available earlier and are less likely to
block the page's first render, leading to performance improvements.
This article provides a basic guide to how preload works.
<link rel="preload" href="style.css" as="style">
<img rel="preload" src="image.png" as="image" />
NOTE: you would have to ditch the background css usage.
Use actual styled html for the cards.
This is more complex way of doing what you want. Dropping the images and using straight up html styled with css. This is perfectly doable and adds the bonus of complex animations to the cards elements if you ever do so desire.
Use SVGs
This one is very similar to the HTML option because you would have to use an svg-loader to make it go straight into your html.
Declare all your images in a hidden div making sure that the browser has your images loaded always. reference here
This one is a bit meh but does the job nonetheless.
It consists of having a hidden div like so:
div#preload { display: none; }
Then your app would load images
// assuming you have the proper loaders configured
const cardOne = require("path/to/card1/img");
const cardTwo = require("path/to/card2/img");
...
render() {
return (
<div id="preload">
<img src={cardOne} />
<img src={cardTwo} />
{/* etc... */}
</div>
);
}
This div would always be rendered ensuring the browser loaded the images on first contact and your app would have the images cached and you could use a background solution like shown in the link:
#element_01 {
background: url(path/image_01.png) no-repeat;
display: none;
}
#element_02 {
background: url(path/image_02.png) no-repeat;
display: none;
}
#element_03 {
background: url(path/image_03.png) no-repeat;
display: none;
}

Related

React doesn't insert image as background

I'm creating a web page and I took a jpg and pgn image to put as a background.
But by no means does it appear on the page.
import './Entrada.css'
const Entrada = () => {
return(
<div style={{
backgroundImage: "url(/secoes_02.jpg)"
}}>
<div><img src='secoes_02.jpg'/></div>
<div className='texto'>testatastastasta</div>
</div>
)
}
export default Entrada
In the code above I can place the image as a figure, but I cannot as a background.
I've already tried to insert it by Css and tried import to.
.geral{
background: url("/public/img/partes/secoes_02.jpg");
}
But in no way does it appear in my react.
I already reinstalled the nodejs packages and changed the folder location.
And the error continues.
Has anyone experienced this?
Try it plz. It works for me.
import footer from '../../assets/images/footer.png';
function MyComponent() {
return (
<footer style={{ background: `url(${footer})`, backgroundSize: "contain" }}>
Try this.. worked for me
js:
render() {
return (
<div className="bgimage">
<div className='texto'>testatastastasta</div>
</div>
)
}
css:
.bgimage {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
background-image: url(https://business.adobe.com/content/dam/dx/us/en/products/magento/open-source/open-source-marquee-2x.png.img.png);
}
Height is given 100%, based on your need you can adjust.

How do I load images from a folder using vue-gallery?

I'm trying to make a gallery with vue-gallery, but I'm not exactly sure how to load images from a folder.
It should also be noted, I'm using the nuxt.js framework.
I've tried just adding the images one by one, but that would be unconventional since I would like to be able to upload images to that folder, and not worry about having to add images to an array. I know node.js, but I'm not sure how to get files in folders without fs.
I am using nuxt.js with vue and vue-gallery installed.
<template>
<div>
<gallery :images="images" :index="index" #close="index = null"></gallery>
<div
class="image"
v-for="(image, imageIndex) in images"
:key="imageIndex"
#click="index = imageIndex"
:style="{ backgroundImage: 'url(' + image + ')', width: '300px', height: '200px' }"
></div>
</div>
</template>
<script>
import VueGallery from 'vue-gallery';
export default {
data: function () {
return {
images: [
'https://dummyimage.com/800/ffffff/000000',
'https://dummyimage.com/1600/ffffff/000000',
'https://dummyimage.com/1280/000000/ffffff',
'https://dummyimage.com/400/000000/ffffff',
],
index: null
};
},
components: {
'gallery': VueGallery
},
}
</script>
<style scoped>
.image {
float: left;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
border: 1px solid #ebebeb;
margin: 5px;
}
</style>
This is the that I'm using, which displays those dummy images. I am unsure how to read from a folder and add them into the images array that vue-gallery` requires.
Expected results: vue-gallery displays the images properly from the folder.
There is no error, it's just me not knowing what to do. lol
I just got it working using this
Click Me

Load Iframe with spinner

This code loads correctly the spinner, but how do I hide it after loading completes?
iframe {
background-image: url("http://jimpunk.net/Loading/wp-content/uploads/loading2.gif");
background-repeat: no-repeat;
background-position: 50% 50%;
}
As an alternative solution, you can do this as well:
<div id="spinner">
<div>
<img src="http://www.ajaxload.info/images/exemples/25.gif" />
</div>
</div>
<iframe border=0 name=iframe src="http://www.w3schools.com" width="950" height="633" scrolling="no" noresize frameborder="0" onload="document.getElementById('spinner').style.display='none';"></iframe>
Style the position of the spinner absolute to the page container to center it appropriatedly
Try jQuery:
$( document ).ready(function() {
$( "iframe .load" ).hide();
});
and create a second css-class for the loading-action:
.load{
background-image: url("http://jimpunk.net/Loading/wp-content/uploads/loading2.gif");
background-repeat: no-repeat;
background-position: 50% 50%;
position: absolute;
width:100%;
height:100%;
}
iframe{
position:relative;
}
Let me know if it works.
Here it is, using font-awesome and jQuery:
$(document).ready(function () {
showSpinnerWhileIFrameLoads();
});
function showSpinnerWhileIFrameLoads() {
var iframe = $('iframe');
if (iframe.length) {
$(iframe).before('<div id=\'spinner\'><i class=\'fa fa-spinner fa-spin fa-3x fa-fw\'></i></div>');
$(iframe).on('load', function() {
document.getElementById('spinner').style.display='none';
});
}
}
You could listen to when the iframe is loaded, and then put a class on the iframe, setting background image to nothing.
iframe.onload = function() {
// remove spinner
};
Sorry for the short answer, but I'm on a phone atm :)
I just wanted to add that another way to do this without Javascript is to have the spinner appear behind the iframe, and give the iframe an initially transparent background; so long as the iframe's content has a background colour it will cover the spinner once it loads.
This is a great way to do this if your iframe is "single-use", i.e- it loads embedded content only once and contains no clickable links, or if you don't care about displaying the spinner once the initial content has loaded.*
There are two easy ways to do this:
CSS Background
HTML:
<div class="iframe_container">
<iframe src="http://example.org"></iframe>
</div>
CSS:
.iframe_container {
background-image: url('path/to/spinner.gif');
background-position: center;
background-repeat: no-repeat;
}
.iframe_container iframe {
background: transparent;
}
Basically the spinner is a background for .image_container, positioned in the center, and visible because the iframe's background is initially transparent. When the iframe content loads it covers the image, even if an error occurs.
Z-Index
HTML:
<div class="iframe_container">
<img class="spinner" src="path/to/spinner.gif" />
<iframe src="http://www.example.org"></iframe>
</div>
CSS:
.iframe_container {
position: relative;
}
.iframe_container .spinner {
position: absolute;
top: 50%;
left: 50%;
}
.iframe_container iframe {
background: transparent;
z-index: 1;
}
In this case we have our spinner embedded as a specific element (which you may need to do for Bootstrap spinners and such), which is positioned using CSS. The iframe in this case covers the image because it has been given a z-index (you may need to use a higher number, if other elements with z-indexes) but the trick is essentially the same.
Notes
As long as it doesn't bother you that the spinner is still technically in the background this works great for a single page-load iframe, or when you only care about the first load.
This is also a good trick to use if you want your site to support users with Javascript disabled, as they won't be left with a spinner that won't disappear.
*If you want to re-use a spinner via Javascript you can still do-so using the z-index option, by setting the spinner's z-index to be higher than the iframe's, like so:
var e = getElementById('my_iframe');
e.onload = function() {
var e = getElementById('my_spinner');
e.style.zIndex = 0;
}
e.onunload = function() {
var e = getElementById('my_spinner');
e.style.zIndex = 100;
}
This works by pushing the spinner above the iframe when unloading (source is changed) and behind it again on load (new content is visible).
You can use jquery on load
$('#showFrame').on("load", function () {
console.log('iframe loaded completely'); //replace with code to hide loader
});
================================================================
=========================2022 Answer==========================
Iframes have a onLoad attribute that you can set to a function
In react you could do something as such:
const spinner = async () => {
document.getElementById('spinner').style.display = 'none';
}
Rendered in a Modal as such:
<div
id="spinner"
style={{
backgroundColor: '#ECECFE',
borderRadius: '8px',
padding: '20px',
}}
>
<Loading
spinnerColor="#2E7DAF"
text="Loading...."
/>
</div>
<iframe id="iframeid" src="" width="650px" height="650px" onLoad={spinner} ></iframe>
</div >

Changing DIV Background Image with JavaScript Not Working

I'm trying to change a div background image on hover, I want to do this with JaveScript so that it works cross browser without any issues. The current code I have is:
<div class="staff" style="background-image: url(/wp-content/uploads/2013/08/IMG_1828- 300x237.png);" onmouseover="this.style.background=url(wp-content/uploads/2013/08/IMG_1836-v2-300x237.png);" onmouseout="this.style.background=url(wp-content/uploads/2013/08/IMG_1828-300x237.png);">
</div>
CSS:
.staff{
width: 300px;
height: 237px;
}
Can anybody see what is causing the problem?
<style>
.staff{
width: 300px;
height: 237px;
background-image: url(/wp-content/uploads/2013/08/IMG_1828- 300x237.png);
}
.staff:hover {
background-image: url(wp-content/uploads/2013/08/IMG_1836-v2-300x237.png);
}
</style>
<div class="staff"></div>
You can use simple css too.. and it will work on all browsers
.staff { background: url("url/img.png")}
.staff:hover { background: url("url/hoverimg.png")}
<div class="staff"></div>
Better use CSS than inline CSS and javascript to achieve the effect.
If you still want to do it inline, here is a example.
jsfiddle
onmouseover="javascript: this.style.backgroundImage = 'url(\'image_url\')'";
you can use css like this:
.staff{
width: 300px;
height: 237px;
background-image: url("/wp-content/uploads/2013/08/IMG_1828- 300x237.png");
}
.staff:hover{
background-image: url("wp-content/uploads/2013/08/IMG_1836-v2-300x237.png");
}
or javascript like:
onmouseover="javascript: this.style.backgroundImage = 'url(\'image_url\')'";
WORKING DEMO
CHANGE I MADE
onmouseover="this.style.background='url()';"
You have to enclose the url in single qoutes...
I would also suggest you use CSS rather than JS to do this. But since you asked how to do it in JS, this is your answer
Most browser should support :hover in css, so there is no need to use JavaScript for this (relevant fiddle here):
.staff{
width: 300px;
height: 237px;
background-image: url("/wp-content/uploads/2013/08/IMG_1828- 300x237.png");
}
.staff:hover{
background-image: url("wp-content/uploads/2013/08/IMG_1836-v2-300x237.png");
}
If you really want to use JavaScript, than you have to wrap url(...) in quotes like so:
<div class="staff"
style="background-image: url(/wp-content/uploads/2013/08/IMG_1828- 300x237.png);"
onmouseover="this.style.background='url(wp-content/uploads/2013/08/IMG_1836-v2-300x237.png)';"
onmouseout="this.style.background='url(wp-content/uploads/2013/08/IMG_1828-300x237.png);'">
</div>
I think you can use this script :
$('.staff').mouseover(function() {
$(this).attr('style',"background:grey;");
})
$('.staff').mouseout(function() {
$(this).attr('style',"background:white;");
})
Change the color to the image path.
$(document).ready(function(){
var staff = $(".staff"); //Avoid repeated traverse
$("img").hover(function(){
staff.css("background",'url(' + $(this).attr('src') + ')');
//Assuming you want to set current image as background image
});
$( "img" ).mouseout(function(){
staff.css("background","none");
});
});
Okay this works for me so when you hover over an image the background of the set div is changed. So when ever you hover over an image .staff background is changed.
I believe that is what you want?

change background image on click with jquery and html5

How can I do to change background image onClick with jquery or java script?
For Example: I have Six(6) images and I want change to NEXT background image when i click on ">" (next arrow) and change to previous background image when I click on "<" (back arrow).
I'm developing this website with responsive html5 and css3.
<script type="text/javascript" src="jquery-1.8.2.min.js"></script> //jquery inside the folder ok
<script type="text/javascript">
var images = ['url("../images/1366x768/image-_0107.jpg")', 'url("../images/1366x768/image-_0012.jpg")'], curIndex = 0; // here I set the images inside the desired folder
// Left arrow selector
$('.backarrow').click(function () { //here I set the back arrow "<"
if (curIndex > 0) {
// Container selector
$('backgrounds').css('../images/1366x768/image-0061.jpg', images[--curIndex]); // here I set my file backgrounds.css and the default image configured there
}
});
// Right arrow selector
$('.nextarrow').click(function () {
if (curIndex < images.length - 1) {
// Container selector
$('backgrounds').css('../images/1366x768/image-0061.jpg', images[++curIndex]);
}
});
</script>
<!--HTML 5 -->
<div id="square">> <!-- here I call my jquery -->
</div>
<div id="square">< <!-- here I call my jquery -->
</div>
/* CSS3 */
/* backgrounds.css */
body {
background: #dcd8d5 url(../images/1366x768/image-_0061.jpg) no-repeat center center fixed; -webkit-background-size: cover;
-moz-background-size: cover; -o-background-size: cover; background-size: cover }
/* default.css */
.nextarrow {
font-size:20px; color:#666; font-style:normal
}
.backarrow {
font-size:20px; color:#666; font-style:normal
}
WHAT I'M DOING WRONG?
The jQuery approach for this is below:
$("#background").css("background-image","url(img_url_here)");
I'm not entirely sure what you are trying to select so I made a jsfiddle which will hopefully make it easier for you to figure out:
JSFiddle
The error seems to be in this line:
$('backgrounds')
What exactly are you trying to select with this? If is an object with id = "backgrounds" you should use $('#backgrounds'), if it's a class you can select it by using $('.backgrounds'). The way you are using, jQuery is trying to search for an element (i.e. tag) named "backgrounds". (Which I'm pretty sure is not what you are trying to do)
Any way, in case you want to change the background-image from, let's say, your body element you should use something like:
$(document).ready(function() {
$(".nextarrow").click(function(){
{
$('body').css("background-image","url(../images/1366x768/image-0061.jpg)"); // Correct the path to your image
}
}
Alternatively, you can change the background-image from an element which id happens to be "backgrounds" using:
$('#backgrounds').css("background-image","url(../images/1366x768/image-0061.jpg)"); // Correct the path relative to the html document this script is running.
I hope it helped. Cheers

Categories