So I was using yslow for firefox and my page weight was way high. My page has a main product image and then maybe 10 thumbnails. If you click a thumbnail, the image opens up in a popup done through jquery. The problem is, yslow is listing even the targets of the thumbnails as part of the page weight, so I guess for some reason the images are downloading.
For example, I have:
<a class="group nyroModal" rel="lightbox-group" href="/upload/topview.jpg">
<img alt="thumbnail" src="/upload/thumb/t_topview.jpg" />
</a>
Would this normal html cause the "upload/topview.jpg" to automatically download? Or is it the jquery plugin "nyroModal"? I'd rather the images didn't preload, that'd waste a lot of bandwidth.
So my question is, does a browser automatically try to download image files that are in the href property of anchors, or is the plugin most likely causing this?
Thanks for any direction you can give me.
Approach 1: Using Download attribute The download attribute simply uses an anchor tag to prepare the location of the file that needs to be downloaded. The name of the file can be set using the attribute value name, if not provided then the original filename will be used.
If you're using an FTP, right-click the HTML file on your server and use "Open With" to open it in your code or text editor. Find the spot on the page that you want to add the link. Place your cursor in the spot in the code that you want to insert your download link.
No, the browser does not download that href
on it's own. I would guess your jquery plugin is following the link to preload it. How to disable that is probably in the docs of the plugin somewhere.
As Squeegy said, the browser is not doing this on its own... I looked at the nyroModal website and it's not part of the default code for that plugin either.
Preloading Images is not considered to be a part of the plugin, as you probably need to preload other images for your website. If you need to do so, you can use this code.
So, do you have other code somewhere else that's doing the preloading? Here is a basic preload image function that you may be able to use to find where this is happening. Search your code for the = new Image()
portion and you may be able to find it.
function preloadImg(image) {
var img = new Image();
img.src = image;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With