is there a way to change my queue order for images?
I have an image which i use as a "blur" preview for an bigger image. I use a cms so there are a lot of images which load before my image. Even preload is ignored.
The order is:
Body with background image
27 images
Custom preview image
What I try is to change my queue order
Body
custom Preview image
27 images
My image is a low resolution image. It is 85x53 and its size is about 2,13kb.
And it start at 1,4s (Sometimes even later).
Thanks for any help :)
Kind regards,
Rakowu
You can try to use a hidden <img> tag at the top of your body to force the browser to load it earlier
Something like this:
<!DOCTYPE html>
<html>
<head>
<!-- ... -->
</head>
<body>
<img src="your/preloaded/image.png" style="display: none;"/>
<!-- ... -->
</body>
</html>
Related
I would like to add the image present at this link http://startup.registroimprese.it/isin/search?0-IResourceListener-data-resultRow-22-resultViewPnl-companyCardContainer-logoImg&antiCache=1628599295826 to my html page. Therefore, I have added the above URL to the "src" attribute in the < img> tag. My HTML code looks like this:
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<img src="http://startup.registroimprese.it/isin/search?0-IResourceListener-data-resultRow-26-resultViewPnl-companyCardContainer-logoImg&antiCache=1628599295828">
</body>
</html>
However, the image is not displayed when I render the page, and this is what I see.
blank page
What I expect to see instead, is the image at the link correctly displayed on my html page. Any idea what is wrong and how I could fix it?
NOTE: I know I could download the image locally and then add it, but I specifically need to find a solution to add the image from the link, and not from a path on my local computer.
i am struggling to add any images whatsoever to html, for them to show when i open in browser
i have tried different images, using them in the correct directories, relative and absolute url
i really do not know why im getting nothing to show...
<!DOCTYPE html>
<html>
<head>
<title> how to</title>
</head>
<body>
<div>
<img src="‪https://static1.squarespace.com/static/503264b0e4b0dbdecd41e3f6/t/590a05131e5b6ce08768b593/1493828890055/polaroid2.png"/>
</div>
</body>
</html>
even the image address copied won't show
any ideas???
As shown in the figure below, there is a special character in your url, causing the browser to treat it as a file on your server instead of on squarespace. Remove that, and your image should be displayed as normal.
<body>
<div>
<img src="https://static1.squarespace.com/static/503264b0e4b0dbdecd41e3f6/t/590a05131e5b6ce08768b593/1493828890055/polaroid2.png"/>
</div>
</body>
This seems to work, deleted first double quotes and then added it back
Or delete the first quotes and then the first h to be sure, then retype
I am trying do to a simple HTML page but for some reason some images didn't appear although the src was correct. In order to discover the origin of the problem I tried to insert the images on the body of the HTML document (outside of divs and without the javascript functions I was using to manipulate the images). They also didn't appear! The src is correct and the images are displayed if I open them in the browser (if I type the address of the image in the url bar).
Here is the code:
<!DOCTYPE html>
<html>
<head>
<title>Site2</title>
<meta charset="UTF-8">
</head>
<body>
<!-- This image appears -->
<img src="images/header.jpg" style="width:100%">
<!-- This image don't -->
<img src="images/img_1.jpg" alt="tigre" style="width:100%">
</body>
</html>
I can't understand the origin of the problem. I tryed to open the images in a editor and save both of them to see if was a problem of encoding or something like that but the problem persisted, the imagens that appeared before continued to appear and the others continued to not show up.
EDIT: If i resized the second image to the same size of the first and save it on a new file it starts to appear although blurry (due to the resizing):
image 1: 1024 x 300
image 2: 850 x 315
The page is just local (I'm not using server programs) and I am using Edge.
Thank you in advance:
works and looks ok,
https://jsfiddle.net/hts3wdjx/
<!-- This image appears -->
<img src="http://placehold.it/350x150" style="width:100%;" />
<!-- This image don't -->
<img src="http://placehold.it/350x150" alt="tigre" style="width:100%;"/>
you problem is images/
<body>
<!-- This image appears -->
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQBLVUTEfwcBSoQz_SNLw41VH_B76zVbXMgw1FPlQ26cYgC61MyPA" style="width:100%;" />
<!-- This image don't -->
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQBLVUTEfwcBSoQz_SNLw41VH_B76zVbXMgw1FPlQ26cYgC61MyPA" alt="tigre" style="width:100%;" />
</body>
http://getbootstrap.com/css/#overview-type-links
And I have seen the solutions here - such as this:
html, body {
width: 100%;
height: 600px;
background:red !important;
}
This isn't working - I need the background for a single page in the application to be all red - I don't want it applied universally - so I need to override the bootstrap.min.css for one page - therefore I cannot specify this color when creating the bootstrap.min.css using there online generator.
Help?
You can go to the .html file for the particular page you want in all red, and modify the background color within the .html file itself by adding a style="background-color:#FFFFFF" to the <body> tag. You can change #FFFFFF to the shade of red as you wish.
For example say we have the code for index.html below:
<html>
<head>
<!-- some code here -->
</head>
<body, style="background-color:#FFFFFF">
</body>
</html>
If that does not work, bootstrap typically has wrappers within each main body tag to represent something or the other. Take a look at the following example:
<html>
<head>
<!-- some code here -->
</head>
<body>
<div id="wrapper">
<!-- some more code here -->
</div>
</body>
</html>
You can also change it to:
<body>
<div id="wrapper", style="background-color:#FFFFFF">
<!-- some more code here -->
</div>
</body>
</html>
You can also use this technique to override any of the Bootstrap CSS files temporarily for a particular page or particular component of the page and it will NOT be applied universally.
Is it important do to it using online HTML and CSS? If I were you, I would have used JavaScript to determine if its the specific page and then assign the background color.
<script>
var location = window.location.href;
if(location =="file:///C:/Users/Fahad/Desktop/index.html")
{
document.body.style.backgroundColor = "red";
}
</script>
You will have to change the url to the link of the specific page where you want to change the color.
I'm having trouble with showing an image on an iPhone. Currently, I have a pretty large image, around 9000x4500. I'm trying to show this image resized in an iPhone. I'm working with the simulator now and it just will not show up. I have some pretty simple code here (using phonegap):
<!DOCTYPE HTML>
<html>
<head>
<script charset="utf-8" src = "jquery-1.10.1.min.js"></script>
<script charset="utf-8" src = "cordova.js"></script>
<style>
img.Image {
width: 100%;
max-width:100%;}
</style>
</head>
<body>
<img src = "FloorPlans/plazaone.png" class = "Image" />
</body>
</html>
And here's a screenshot of what my simulator looks like:
Anyone know how to fix this issue?
Figured out why it wasn't working. It seems that if one tries to put an image on iOS through HTML, there is a certain limit of what resolution it can handle (not for jpgs it seems, but for GIFs and PNGs, might have something to do with transparency). All I had to do was resize my pictures down to 50% of their original size and they worked.