I have a template like this :
<div ng-repeat="product in products">
<img ng-src="{{product.imageURL}}" />
.....
</div>
Each time this is regenerated it results in the browser clearing out the img and placing it back in again and will therefore redownload from source ( total size of transferred files keep increasing each time I switch from other state to this one, and i clearly can see that requests to image url are made again in Chrome Developper Tool ).
Is there a way to tell angular : " If you see that it's the same image url, do not redownload it between states". Some sort of caching ? I thought that browsers did this natively, but it doesnt seem to be the case here.
Related
I have been using Svelte for a little while and now I have switched to SvelteKit so I can add multiple pages. I want to add some images to my site but I don't know where to put them. In Svelte I would just put them in public/images but there is no public folder with SvelteKit (I set it up with npm init svelte#next my-app if that matters). Would I put them in static?
Thanks!
I added the images in static/images and referenced them with src="/images/photo.jpg" like #b2m9 said and it works perfectly.
I recommend putting images under src/lib, not static. For example you could make a src/lib/images or src/lib/assets folder and put them there.
The reason is performance:
For files imported from anywhere under src, at compile time Vite adds a hash to the filename. myImage.png might end up as myImage-a89cfcb3.png. The hash is based on the image contents. So if you change the image, it gets a new hash. This enables the server to send a very long cache expiration to the browser, so the browser can cache it forever or until it changes. It's key-based cache expiration, which IMO is the best kind: cached exactly as long as it needs to be. (Whether the server actually sends the right caching headers in the response may depend on which SvelteKit adapter you use and what host you're on.)
By contrast, images under static don't have a hash added to their name. You can use the static directory for things like robots.txt that need to have a specific filename. Since the filename stays unchanged even if its contents change these files by necessity end up having a cache-control value that includes max-age=0, must-revalidate and an etag, which means even if the browser caches the image it still has to make a server round-trip to validate that the cached image is correct. This slows down every image on your site.
Usage:
When putting images under src/lib, you reference them like this:
<script>
import img from '$lib/images/img.png';
</script>
<img src={img} alt="Image" />
I recommend simplifying by adding svelte-preprocess-import-assets to your project, which automates the process of importing images and cleans up your code. You wrote the following and it generates the code above:
<img src="$lib/images/img.png" alt="Image" />
As Sveltekit uses Vitejs, there is a easy solution mentioned in Vitejs official web site (Click Here).
First inside the script tag :
<script>
const imgUrl = new URL('./img.png', import.meta.url).href
</script>
then inside your Image tag just use that variable,
<img src="{imgUrl}" alt="" />
or,
<div class=" h-screen w-full" style="background-image: url('{bgUrl}') ;">
</div>
You can import static images from any relative path.
there is also svelte-image.
"Svelte image is a pre-processor which automates image optimization using sharp.
It parses your img tags, optimizes or inlines them and replaces src accordingly. (External images are not optimized.)
Image component enables lazyloading and serving multiple sizes via srcset.
This package is heavily inspired by gatsby image.
Kudos to #jkdoshi for great video tutorial to Svelte Image."
-https://github.com/matyunya/svelte-image
I am using Dropzone code obtained from this web site
DropZoneCode
In this example the dropzone is the width of the entire screen. I would like to reduce that size down to about 400 to 500 pixel. When I reduced the size of the div I could only drop 2 files before it stopped uploading files. The 3rd file just opened in the browser, which I believe was an indication I was outside the dropzone.
I believe if I reduced the size of the icon showing in the drop zone I would be able to add more files. Can anyone tell me where within the css file I can adjust the size of those items?
I was able to get it working using this setup
<asp:Panel ID="pnlStealthStat" runat="server" Visible="false">
<div id="dZUpload" class="dropzone" style="height:auto;margin-top:5px;">
<div class="dz-default dz-message"> Drop Stealth Stats Files Here</div>
</div>
</asp:Panel>
This setup was part of a bootstrap column and is functioning as expect
I thought this would be an easy question to find an answer to, but I can't seem to find an answer.
I'm sure that this can vary with implementation. But generally speaking, for browsers for recent versions chrome, firefox, safari, ie. When are image requests sent to the server.
Is it as soon as a DOM element is parsed, or rendered, with a reference to an image? I'm assuming when the DOM is first rendered all referenced images are immediately fetched. Obviously the browser will check the cache first before requesting.
Does / How does this differ from images that are referenced in CSS?
As soon as the HTML-Tag is closed.
Assuming you have a HTML-Chat, the server may never close the stream and the DOM is never compleatly loaded, you will have this:
<body>
<div id="content">
<span class="smily">
<img src="smily.png">
</sp.....
Whearat ... defines data that currently not yet has reached the browser.
All css-rules can match, except the :last-child pseudo-class!
Indeed: the simly.png is requested after closing the img-tag.
I've been working on a website locally, creating the web page using Dreamweaver and the latest version of Bootstrap (v 2.3.2). I've been testing it in different browsers and the images seem to load correctly in all of the other browsers (Chrome, Firefox, and Safari). When I go into Internet Explorer 8, some of the PNG files I created load correctly while others don't load at all.
Here is how it looks in Chrome:
Here is how it looks in IE8:
I read through many solutions. The first here, where I went into the Developer tool and did an image report. In the report, as seen below, shows it can read the ALT tags but can't seem to read or think the image link is broken:
Knowing this, I tried finding a more in-dept solution, including this post. Thinking it could possibly be the way the picture was created, I tried multiple ways of creating the images (including changing the format of the file to RGB 8-bit in Photoshop and copying/pasting the vector images from Illustrator to Photoshop) and then removing the browser cache every time I would modify the images and restart the browser. None of it seems to work!
I was wondering if there was something else I could possibly try?
The code I'm currently inserting these images are through the HTML:
<div class="span4">
<div id="applicationInfo">
<p>Application #:<br />
PI: <br />
Status: <br />
Disposition:
</p>
</div>
<ul>
<li>PI / CoPI Information<img src="images/incomplete.png" /></li>
<li>Project Information</li>
<li>Funding Information</li>
<li>Proposal Summary<img src="images/complete.png" /></li>
<li>Proposal Narrative</li>
<li class="current">Current Research Summary<img src="images/complete.png" /></li>
<li>Budget</li>
<li>Publications List</li>
<li>Supplemental Information</li>
<li>Save <span class="small">(without submitting)</span></li>
<li>Submit</li>
</ul>
</div>
This post helped a lot! What helped was making sure to have the images saved as RGB 8-bit or 16-bit. I usually have it defaulted at 16-bit to give more color.
Best of luck to anyone looking for this answer!
I'm working on a gallery type application - one template puts together a popup dialog for a larger view of thumbnail images when clicked. The server path to the image is included as a template variable.
Gallery.Templates.Popup = "\
<div class='popup'>\
<img class='popup-image' src='{{image-path}}' />\
<div class='name'>{{name}}</div>\
<div class='caption'>{{caption}}</div>\
<div class='dimensions'>{{dimensions}}</div>\
<div class='price'>{{price}}</div>\
</div> \
";
This works very well EXCEPT for the first time the image is loaded. The dialog is constructed and shown but at the time the html string is attached to the dom, it lacks the image. The problem it is causing is in positioning the dialog:
The dialog box is positioned in the middle of the screen like this:
left = window.width /2 - dialog.width/2
But since the image is not present, the dialog.width variable is incorrect. Again, this only happens the first time a thumbnail is clicked, I'm guessing the image is cached for subsequent clicks.
Would this be handled by prefetching the images somehow? If so, do they need to be attached to the dom in order to be cached or can I just load them in an array?
Many Thanks !
If you can get the image size ahead of time from the server, you could use that to help you size the '.popup' div appropriately.
It sounds like a bad idea to prefetch images if they aren't needed and I can't think of a way to ensure that a specific image is loaded before it's html is generated programmatically.