I have a simple html page (in IIS) in which I display the image. The image (image source) is overwritten every minute. In the html page I have done that the page refreshes every minute to load the newer image.
I thought everything was working well for me and as it should. But I found out that about once a day I get stuck rendering an image - I mean that I only see half of that image in an HTML page at a time. When I open the image normally, it is complete.
I can't figure out what this might cause, can you advise me?
Related
I have made some modifications to a website I am working on and now, when I load the homepage, the header image seems to load after the rest of the page leaving a white space and then the image loads it pushes the rest of the page down to where it should be. This site is created from scratch with HTML, CSS and JS. The website is https://www.visionwebdesign.ca so you can have a look. Once the webpage is in the browser cache, it loads fine.
The header is actually a part of a carousel of images. Here is the code I am working with:
Vision Web Design
...
I have tried reducing my images to a smaller size but no luck there. Looking for any help available.
J.P.
This is probably not the answer you are looking for, but looking at the HTML page code it appears you are just loading in the images quite normally using IMG tags, no script code in use there, so any delay may simply be the time it takes for the images to download from the server to the browser. I saw just a bit of a delay in loading the header image (tried in both Firefox and in Chrome) but I'm on a 300Mbps down internet connection so everything is fairly quick.
Image size may be one thing to look at. Alternately setting the content DIV to display:none until after the first image has loaded then switching it using Javascript. I found this example here at Stack Overflow:
A method of solving this problem would involve hiding the full body for the 2 seconds or however long it takes to load the body. We can do this using Javascript:
var timeouttimer = setTimeout(showbody, 2000);
var everything = document.getElementById("allcontent");
function showbody {
everything.style.display = "block";
}
And then in the HTML add the following div surrounding all the content of your webpage:
<div id="allcontent" style="display: none;">
when I visit the page most of the times it is ok .
but some times when I keep pressing refresh or for example if I am in a another page and then came back to that page via a link , page wont be shown right ,look likes it could not load the CSS file .
I delete the CSS and then I reload the page and I saw page is just like those times that I mention above , so I am pretty sure it is about page's CSS .
Next when page is disorder I click on refresh and page gets right
another thing I should add is ,always I have this problem with large screens browsers like in laptop or pc but never experience this problem with tablet or phone and small devices
I design that web site with Nice page so every page has 2 CSS (nicepage.css and page.css)files ,and 2
JS files
you can visit the page here :
https://www.drhosseinchi.ir/docs/first/
so what can I do ?
Looks like you are a beginner to web development. You need to read more about "cache". Browsers usually cache files such as css to save user's data. Try renaming your css file or make it internal by moving it to page header section and everything should work.
I'm trying to include a booking frame into our website using an iframe within a html content element. However, the particular website does not load. Instead a white area is shown.
I am trying to include the following page:
https://booking.cinetixx.de/frontend/index.html?bgswitch=false&cinemaId=1164899599#/eventList/1164899599
I've tried calling a different website and this worked:
It appears the problem is related to the specific website I am trying to include.
You can see the test page on https://www.kurtheaterhennef.de/index.php?id=179
Your test page worked for me. The iframe is loading there.
I have a program that let's people design web pages graphically. Then hitting Publish creates an html file that is supposed to be an exact copy of what they created. The elements created by the editor are HTML elements. Publish then gathers up all the elements that have been created and for each one adds it to a string with
canvasOuterHTML += clone$[0].outerHTML;
So all the styles, text, etc., get put on the string. This string, along with some other information is written to the .html version of the page, and when this .html is loaded into a browser the browser displays the page!
But something is expanding the published page vertically. I've created the simple page below to illustrate. The first image is the page in the editor. The second image is what the html displays in the browser.
I'm completely stumped because the HTML and CSS for the two markups is exactly the same, so how can one be higher? I can't even think of a mechanism that would do that. Does anyone have any ideas? Thanks.
I have a strange issue with a particular image URL.
First of all please visit this page with your clean cache (it's an under development Reddit clone in Turkish language, anyway...)
So, the thumbnail image didn't show up right? Nothing, just whitespace right? I mean no thumbnail image unlike this page right?
This is how we are loading the thumbnail image:
<div class="link-thumbnail" style="background-image: url('http://www.herkesebilimteknoloji.com/wp-content/uploads/2017/01/dunya.png');"></div>
Now please visit the image directly with your browser and return back to the problematic page. This time image showed up right?
Eventually my conclusion is; background image is not showing up unless it directly visited and cached by the browser.
So what is the mechanism/reason behind this? As you can imagine by just looking to URL, image's host is a WordPress site. So what could be the trick to prevent this image to load by background-image: url('...') By the way it's loading the image perfectly with <img> tag.
I know some wallpaper web sites doing similar trick but none of them were giving away the image directly without doing a redirection trick. I believe this case is not similar.
And last but not least; how can I handle such a case when using background-image ?
You are loading this image from a different URL / wordpress system. It seems like Wordpress itself prevents images within its "file system" to be loaded as background images from other URLs.
But you can just save that image, put it on your own site and load it from there.