How to Preload Images without Javascript?
From http://snipplr.com/view/2122/css-image-preloader
A low-tech but useful technique that uses only CSS. After placing the css in your stylesheet, insert this just below the body tag of your page: Whenever the images are referenced throughout your pages they will now be loaded from cache.
#preloadedImages
{
width: 0px;
height: 0px;
display: inline;
background-image: url(path/to/image1.png);
background-image: url(path/to/image2.png);
background-image: url(path/to/image3.png);
background-image: url(path/to/image4.png);
background-image: url();
}
Preloading CSS Images
I can confirm that my original code seems to work. I was casually sticking to an image with a wrong path.
Here's a test : http://paragraphe.org/slidetoggletest/test.html
<script>
var pic = new Image();
var pic2 = new Image();
var pic3 = new Image();
pic.src="images/inputs/input1.png";
pic2.src="images/inputs/input2.png";
pic3.src="images/inputs/input3.png";
</script>
Preload images with link tag - remove warning (html/Javascript)
This might happens if the image in question is not part of the page content. This warning will not show if the actual image is on the page itself. If the browser doesn't find the image on the page, but it is preloaded, you get this warning.
Also preloaded images do not need CORS
Preload Image in html gives warning message
There is no need to user crossorigin when you preload an image! Images do not need CORS
Just remove crossorigin
WITH crossorigin your will see one failing preload and one successful load
Preloading then adding additional images after page load to an image gallery on button click
Generally you would create an image with JavaScript through either document.createElement('img')
or the Image()
constructor. Both result an in instance of an HTMLImageElement
.
With this, you'll have an image that is not connected to the DOM, so it's not visible to you or the user. You can use this element to load the image behind the scenes by setting the image' src
property.
Then by listening to the onload
event you can determine whenever the image has finished loading. From here you could continue your flow by adding the image to the DOM and, for example, fade it in with animation.
The example below shows this process in the form of a function that returns a Promise
. This promise will resolve whenever the load event has been triggered.
const preloadImage = src =>
new Promise(resolve => {
const image = new Image();
const onLoad = () => {
resolve(image);
};
image.addEventListener('load', onLoad, {once: true});
image.src = src;
});
Using it should be like this:
const src = 'http://example.com/my-image.jpg';
preloadImage(src).then(image => {
// Here the image has been loaded and is available to be appended, or otherwise.
document.body.append(image);
});
In your case you would loop over each image, call the function while passing the URL of the image, and append the image to the DOM when it's finished loading.
You can handle any animations, like fade-ins with CSS.
Real world implementation
So how should you implement this in your project? You'll need to start at the point where you create your images. Currently your images are created as strings. But strings are just strings, they aren't HTML elements, yet.
I'd recommend that you'll create a placeholder for each image. This placeholder could visually indicate that an image is loading and act as a wrapper for the image. Add this placeholder immediately to the pItems
element.
Then load the image for each Image
in your data.projects
array by calling the preloadImage
. Whenever the image is loaded, append it to the placeholder we've just created. You should now have the effect that first a placeholder is added and the images are starting to appear one by one.
The same logic should be applied for the load more loop.
...
}).then(function (data){
for (let i = 0; i < itemsStart; i++) {
// Create a <div class="placeholder"> which should act as a placeholder / wrapper.
const placeholder = document.createElement('div');
placeholder.classList.add('placeholder');
// Create the image based on the Image value.
// Whenever the image is loaded, add it to the placeholder.
const src = data.projects[i].Image;
preloadImage(src).then(image => {
placeholder.append(image);
});
// Immediately add the placeholder.
// This line doesn't wait for preloadImage to finish because preloadImage is asynchronous. Look into Promises if that is new to you.
pItems.append(placeholder);
}
...
});
From here you've got control over how the placeholder should look and any animations an image inside that placeholder should have.
Related Topics
Issue with Comparing Two Numbers in JavaScript
Can You Disable Tabs in Bootstrap
Dynamically Changing Stylesheet Path Not Working in Ie and Firefox
How to Dynamically Change CSS Style Attribute of Div Tag
How to Make Twitter Bootstrap Submenu to Open on the Left Side
How to Open Bootstrap Modal in Ajax Success
How to Execute Jquery Code Only Once
Generate Random Element Position and Prevent Overlapping in JavaScript
Rotating a Div How to Set Around Which Point to Rotate
Vue Transition Not Triggering on Button Click
Bootstrap 3 Accordion Collapse Does Not Work on Iphone
Apply Random Color to Class Elements Individually
Vanilla JavaScript: Resize Font-Awesome to Fit Container
How to Convert X,Y Coordinates to an Angle
How to Get Screen Position of CSS3-3D Transformed Elements
Firefox Not Able to Enumerate Document.Stylesheets[].Cssrules[]
Determine Whether Element Has Fixed or Percentage Width Using JavaScript