I have this htmls on a page which renders a photo album.
As you can see that there are 3 <img> tags.
The first two is under <li> which has display:none. But the last image is visible as it has style=''.
My question is: during page load will the first 2 images be loaded with the last image even if their container has display:none?
<div class="gallery">
<ul id="PhotoContainer">
<li style="display: none;" name="DSC01100.JPG" id="4ee01301602fdd0efc35683e">
<img src="http://site/Files/Get?fileId=4ee01306602fdd0efc356844"></li>
<li style="display: none;" name="DSC01102.JPG" id="4ee01308602fdd0efc35685f">
<img src="http://site/Files/Get?fileId=4ee0130a602fdd0efc356864"></li>
<li style="" name="DSC01101.JPG" id="4ee01306602fdd0efc35684f">
<img alt="my description for this image" src="http://site/Files/Get?fileId=4ee01308602fdd0efc356855"></li>
</ul>
</div>
If by "loaded" you mean downloaded, then yes. Resources with display: none styling are still fetched, just not rendered. In fact, this is a valid image pre-loading technique, as discussed in this article.
To verify, you can load your page and look at the downloaded resources tab in Chrome Developer Tools or Firebug.
It depends on which browser is loading the web page, I know google chrome loads all images, I expect most other browser are doing the same...
All images will get loaded into the cache, and technically the webpage. However, the css hides the 2 images before they come in contact with the human eye.
Related
3/8 images for my projects on my github portfolio arent showing up on github pages but do work when I open a local browser.
div class="cbp-item development">
<!-- data-title attribute will be use to populate lightbox caption -->
<img src="assets/img/streak.png" alt="custom alt 1" class="img-fluid"></a>
<div class="cbp-hover">
<h4><a class="cbp-lightbox" data-title="Portfolio One"
>Streaking</a></h4>
<p><a target="_blank" href="https://github.com/dodgen92/Streaking">React JS memory game</a></p>
</div>
</div>
This is a snippet of a broken image (the indentation is cleaner in the actual code), I'm quite baffled as they're all essentially a boiler plate of each other. Any help would be greatly appreciated
Make sure to capitalize the image's file extensions.
I should note that the website I'm working on is meant to be pretty simple.
The way I have my website files organized is that under one folder containing the entire website, I have the .html file for the home page, which contains links to different pages inside it for photos, videos, etc. Each of these pages have their own folders.
Attached here is the code I have for one of these pages, meant for my photos. I learned from this thread (Link not going back to home page) that if you just have:
Home
That the link will take you back to the index/root directory.
(Is this different from the home page? Sorry, I'm a noob.)
Although, when I originally had it has just the code above, the link takes me to this weird gray page that just shows all of the files of my website (is that root place or whatever it's called?).
Although, I see that I'm able to from there just simply add the .html file for my home page in that link directory, so the code I have now seems to work.
Is this an okay way to have a link to go back to the home page? Thank you for your time.
<!DOCTYPE html>
<html>
<style>
div.img {
display: inline;
max-width: 650px;
}
</style>
<body>
<div> <!--Home Button-->
<a href="/homepage.html" style="float: right; margin-right: 100px;">
Home
</a>
</div>
<div class="img">
<img src="1.jpg" width="384px;" height="384px;">
<img src="2.png" width="384px;" height="384px;">
<img src="3.png" width="384px;" height="384px;">
<img src="4.JPG" width="384px;" height="384px;">
<img src="5.png" width="384px;" height="384px;">
</div>
</body>
</html>
If it works and you are okay with having the path /homepage.html as your home page, then it is a perfectly good and logical way of linking back to the home page.
As Kei mentioned in the comment, it is highly advisable to rename this file to index.html as most web servers and browsers will default to this file name as the root. For a lot of people, it's more desirable to just go to a domain (ie: mydomain.com) as the home page, rather than having to type in mydomain.com/homepage.html.
All this to say, if you rename your home page file to index.html and serve this website through a web server of some sort (Apache for example), then you can simply use / as a path and it will bring you directly to the home page. I know that you mentioned that you are a beginner, so this may be slightly outside of the scope of what you are asking, but just letting you know for the future. Good luck!
this is pretty basic but I can't figure out why my image won't render. The broken image icon doesn't appear and I'm viewing my page on localhost. I'm not sure how to upload a screen shot but I've played with the relative path in many ways and can't figure out the problem. When I link to an online image it renders. I'm using rails/foundation currently but I actually had the same problem using a MEAN stack a couple weeks ago. The issue seems to be only when using a server. Any help is appreciated, thanks. EDIT: my views and assets folder are at the same level (siblings?) views path: app/views/projects/home.html.erb. images path: app/assets/images/volvo.jpg; I've selected the image file and done 'copy relative path' and played with it every which way. I don't think it's the path but who knows.
<h4>pic below</h4>
<img src"../../assets/images/bmw.jpg"/>
<h4>pic above</h4>
<h2>photo gallery</h2>
<ul>
<li>
<img src"assets/images/bmw.jpg"/>
<img src"../../assets/images/volvo.jpg"/>
<img src"saab.jpg"/>
<img src"../../assets/images/saabtwo.jpg"/>
</li>
</ul>
You are defining your images incorrectly; you forgot the equals sign (=). You need to have src= instead of just src before the image path. This is because of the way the defining/setting of attributes works in html.
For your code, this would be:
<h4>pic below</h4>
<img src="../../assets/images/bmw.jpg"/>
<h4>pic above</h4>
<h2>photo gallery</h2>
<ul>
<li>
<img src="assets/images/bmw.jpg"/>
<img src="../../assets/images/volvo.jpg"/>
<img src="saab.jpg"/>
<img src="../../assets/images/saabtwo.jpg"/>
</li>
</ul>
As a general rule, to define a style in html, you do this: attribute="value".
In the _Layout.cshtml, I have a heading image and two link images that change into other images when the cursor hovers over them. When the page is loaded initially (e.g. //localhost:58055/), the images are shown. When I redirect through the links so that the URL is //localhost:58055/Home/Index, for instance, the images only show the little "broken image" icon. Why might this be? Here is where I specify the header's image in _Layout.cshtml.
<header>
<div class="trippy-title">
<img src="images/title_wider.jpg" width="100%" height="100%" repeat>
</div>
</header>
I recommend you read this article for a better understanding of locations in ASP.net.
http://www.west-wind.com/weblog/posts/2009/Dec/21/Making-Sense-of-ASPNET-Paths
as a simple solution you can use ~/images/title_wider.jpg this works with Razor 2+
I want to know how I can link to a video using a thumb of a image from one page to another.
For instance if I wanted to link to the page only from one page to another I would simply put
<img src="theotherpage.html" />
But that doesnt quite do the job for me. I need to link to the video directly.
How can I do that?
Just wrap the image with <a> tag
<a href="link-to-direct-video">
<img src="image-thumb-src" />
</a>
If I understand your question correctly.
If you want to link to a page with one video, use YardenST's answer. If you want to link to a page with many videos, but you want to scroll to that video you can use an anchor.
On the videos page, say you have the following HTML:
<div id="video1"> ... </div>
<div id="video2"> ... </div>
If you wanted to link to the second video, you could use
<a href="/videos.html#video2">
<img src="image-thumb" />
</a>