I have to change background image on page load as I use onload on body or i have to use window.onload which one would be faster to be background image load without showing white background as page load. and where I have to put it on head or body after tag so it can shows as site opens without showing white background
$('body').onload('background-image', 'url(http://picture.de/image.png)');
Keep in mind that once an image has been loaded in the browser, it will be in the browser cache and will load much faster the next time it is used as long as the image hasn't expire from the browser cache.
For your problem, there are two things you try.
1) Try to preload images with javascript:
function preloadImage(url) {
var img=new Image();
img.src=url;
}
2) Optimise your images. Use a tool like tinypng in order to compress your images. Most of the times you will save up to 60%. If you have a container that you want the image to fit in, try to resize the images into the width and height of that container (use width and height).
Can you please check the below example.
http://jsbin.com/pozadujeca/edit?js,console,output
and using CSS you can apply the background color to the image load or show loader at background.
I hope it will help you
Thank you
I wouldn't take the js route, instead I would just save the image as a progressive jpg: https://optimus.io/support/progressive-jpeg/
first you can understand the flow of js engine .how it works .you can put in head if you want to load it when js is loaded .if you want to display background image then you must put into html .because html loaded before js in browser
Related
I am using a lightbox in my react app (displays an image in a modal, user can go to next image by hitting right arrow key).
The problem is that whenever a user goes to the next image, it takes a second for the tag to make the request to load the image. I would like to pre-load the next image before the user gets to it.
All of the image URLs are fetched at once in the parent component, so I have all of the image urls.
Does anyone know of a way I can pre-load the image so it doesn't have to take the second to fetch and render?
I'm not exactly sure if I understood correctly what solution you would like, but you could use.
If you want to have a look: https://github.com/desandro/imagesloaded
which is specifically made for use cases like masonry plugin layouts, to check if all images have finished loading and then execute functions / other scripts.
Example:
$('#your-container').imagesLoaded( {
},
function() {
$('a.gallery').featherlight({
targetAttr: 'href'
});
}
);
I hope it helps a little.
I want to embed a pdf-document on my website, but cannot manage to display the document in the iframe without an overwhelmingly useless gray border.
Now I see that this gray border is not always displayed when embedding a pdf-document, but in my example as you can see in the picture, there is a large border withing the iframe, next to the pdf-page I actually would like to display.
See here what I am talking about:
I am using a simple iframe-tag within a div-tag.
Does anybody know if it is possible to remove the grey border ("Border in iframe") or how I can deal with this problem?
The border you see is when the page is not matching the aspect-ratio of the view-port of the Acrobat plugin.
You need to make sure the iFrame and the plugin and the document inside it are all the same width and that the user has not set the page to be shown in some other way such as full height (set in Acrobat Reader preferences)
For now try adding this to the PDF url:
#view=Fit&toolbar=0&statusbar=0&messages=0&navpanes=0&scrollbar=0
Is there any way to create clickable hotspots over a JPEG image in order to navigate to a different image/page? I would like to achieve this without having to code everything in manually and InVision has a lot of limitations.
Any suggestions would be appreciated.
If you want to make parts of an image clickable, just use an image map. http://www.w3schools.com/tags/tag_map.asp
to do this without coding it in manually you will need some application to make the code for you. it'd be faster for a 1-time use to just set a size for your image, and then make areas (like div's) that are set in place of where it looks like a button on the image, and set their onclick to be a link to your other page or file.
I'm building an access database for my music catalog. I've created one main table with a bunch of queries. I want to make a decent looking front end. I have a bunch of buttons with macros assigned to them already. The problem (which I presume is something very small that I'm missing) is that I added a picture to the button it's just a picture of vinyls that would run a query to show my vinyls. The picture only displays a portion rather than the whole picture. I can get it to show the picture by expanding the button size but this is not desired.
Any help is appreciated.
Thank you and Happy Thanksgiving.
The button doesn't resize the image you assign to it.
You first need to resize your picture files to whatever size you deem suitable for the button, then use that scaled down image.
Alternatively, you can use the Image control instead of a button. That control will allow you to resize the image inside it, but it will generally appear slightly blurry, depending on the image and the dimensions you resize it to.
Also, forcing Access to load larger image and then resize them can make your application less responsive if you have a lot of images, since you make it do extra work.
A workaround is to work with an image and a button.
Insert and size the image you need in the form
Add a button, setting its property "transparent" to true
Overlay the transparent buton over the image
Make sure the button is on the topmost layer usuing the "bring forward" in the image menu. We have then the transparent button over the picture
Associate VBA code or macro to transparent button.
For all intent and purposes, user will click on an image, but because there is a transparent button over it, will be in fact clicking on the button
Hey, so I am not looking to do anything along the lines of a pre-loader, I just want to know how to keep the browser from displaying this image:
Before the image loads.
Thanks!
it all depends on the browser and the speed of the user's connection.
You can always use a javascript preloader to stop an image from displaying until it is fully loaded on the users computer
try this jquery preloader
:-D