I have a set with webp and jpg files as alternative images for incompatible browsers.
Do I understand correctly that in the column "Initiator" the entry "imageset" means the loaded image and "vendor-main.chunk..." means the alternative image?
I have inspected the DOM element and it shows me under current source that the webp image is being loaded correctly.
Both have the status 200.
Will the alternative image still be loaded, even if the browser uses the webp image?
Here are 2 Screens from the DevTools:
edit 1:
Here is some jsx (react) code for selecting the appropriate image:
<ImgContainer>
<ImgItem animate={animationImg1}>
<picture>
// if the browser support webp images
<source srcSet={img1Webp} type="image/webp" alt="Praxis Hauptraum" />
// if the browser does not support webp images
<source srcSet={img1Jpg} type="image/jpeg" alt="Praxis Hauptraum" />
// Fallback if the browser does not support the picture tag
<img src={img1Jpg} alt="Praxis Hauptraum" />
</picture>
</ImgItem>
....
edit 2: screenshot showing the images on the site:
edit 3: Screenshot from Dom of the section "Praxis". This Section contains 3 images as picture tags.
"imageset" in the Initiator column basically means an image loaded from a given set of images to choose from defined within HTML. In your case it means via <source srcSet="..." /> in your <picture> elements.
"vendors~main.chunk.js" in that column means the related image got loaded through a JavaScript call. The request for that image happens on line 25114 of that script.
So both requests obviously happen independently from each other and the one caused by the script is redundant.
In order to find out what exactly is causing the request to the JPEG image, you need to click the last line in the call stack (main.chunk.js:1:89). That switches to the Debugger where you can see what statement is the origin of the request. (You may want to pretty-print that script.)
From that line you can step into the function calls that lead to the request.
is there a way with javascript/jquery to prevent images from loading? I am building a slideshow from a html list with images. So I would like to collect all the src data and then prevent the images from loading. So later when the user really needs the image I would load it then.
I found some lazy loading script on google but couldn't find the way they prevent images from loading.
Thanks in advance.
Edit1:
It seems from the answers that it's not possible to use javascript to prevent images from loading.
Here is a script that does lazy loading. Could anybody explain how it works? It seems when javascript is off it just loads the images normaly and when it's on it will load them when you scroll to their location.
You can wrap the image in a noscript tag:
<noscript>
<img src="foo.jpg"/>
</noscript>
All browsers that has JavaScript enabled will ignore the image tag so the image won't load.
If you render the HTML on the page, even if it's hidden, it's going to load. If you want images to load only when they're needed, you're going to have to dynamically set the source (src) on the image tag in javascript.
Edit 1: The script you referenced merely checks to see how far you've scrolled the page down and then determines which images are visible (or almost visible) by checking their top -- see the $.belowthefold and $.rightoffold extensions.
The example works great when the images are all the same size because their containers can also be the same size and you won't get any odd page resizing behavior when you lazy load them. If your images' heights and widths vary, you may get some odd results.
Edit 2:
<script type="text/javascript" charset="utf-8">
$(document).ready( function() { $("img").removeAttr("src"); } );
</script>
<img src="Chrysanthemum.jpg" />
<img src="Desert.jpg" />
<img src="Hydrangeas.jpg" />
<img src="Jellyfish.jpg" />
<img src="Koala.jpg" />
<img src="Lighthouse.jpg" />
<img src="Penguins.jpg" />
<img src="Tulips.jpg" />
Store the URLs somewhere else, then set all image URLs to some dummy image (empty, transparent, "loading data...", whatever). When an image should be displayed, use JS to set the src attribute and the browser will fetch it.
Well with Prototype you can do something like this I guess:
var unloaded = [];
$$('img.noload').each(function (image) {
unloaded.push(image);
image._src = image.src;
image.src = '';
});
To load all of them:
unloaded.each(function (image) {
image.src = image._src;
});
To load the first one:
function loadImage (image) {
image.src = image._src;
}
loadImage(unloaded.shift());
Well I hope you got the idea.
Just do not include the img tag in your original HTML, generate it on the fly using DHTML as you need it. You can also put a fake url to image in the img tag and replace it with the real one dynamically.
On the side note - what's the point. All you are trying to do here is to build another caching mechanism over the existing one. Leave caching to browsers, they are pretty good at this
You can use the portion below to replace all image tags with a dummy file (for example, an 1x1 transparent gif). The url's are stored in a array for later reference.
$(document).ready(function(){
var images = new Array();
$("img").each(function(i){
images[i] = this.src;
this.src='blank.gif';
});
});
I don't recommend this solution, for many reasons (like it ruins your page if you don't have Javascript enabled, screen-readers etc), but its a possibility...
You could change the IMG tag so that it hijacks a different attribute, like ALT (LONGDESC, or TITLE too):
Then use Javascript to update the SRC attribute with the ALT value as you need to.
So thats one way, and not a good one. I think the only real approach is to dynamically generate the proper IMG tag as needed via Javascript and not publish it with the HTML (this too has implications for non-JS browsers etc)
This article shows some tests using both css background and img tags on a set of standard browsers.
In my personal experience the PictureFill by Scott Jehl is the best solution I've ever used to deal with image resolutions and sizes for mobile devices.
I know this is an old question, but it took me a while to figure out how to accomplish what I wanted to. This is the top result on DuckDuckGo so I think it's worth posting here.
This little snippet will prevent imgs, embeds and iframes from being loaded and will manually load them later when needed.
One caveat: objects that are loaded too fast for JQuery/JavaScript to catch them are still loaded, and the script still removes them.
Since this is intended to decrease load time this should not be a problem though.
Fiddle
loadObjects = function() {
/* LOAD OBJECTS */
$("img, embed, iframe").each(function() {
var obj = $(this);
obj.attr("src", obj.data("objsrc")).ready(function() {
obj.fadeIn(1000, "linear").prev(".loading").fadeOut(750, "linear", function() {
$(this).remove();
});
});
});
}
$(document).ready(function() {
/* *** PREVENT OBJECTS FROM LOADING *** */
$("img, embed, iframe").each(function() {
var obj = $(this);
obj.data("objsrc", obj.attr("src"));
obj.hide().attr("src", "").before("<span class=\"loading\"></span>");
});
});
You can also wrap the image in a template tag:
<template>
<img src="foo.jpg"/>
</template>
Browsers will not try to load it.
The answer to this problem is very easy via insertAdjacentHTML() which lets you add HTML when you like, in this case on button click:
function LoadImages(){
document.body.insertAdjacentHTML('afterEnd','<img src="one.jpg" alt="" height="100" width="100"> <img src="two.jpg" alt="" height="100" width="100">');
}
The HTML...
<button onclick="LoadImages();">Click to load images</button>
Good day.
When we use Google Analytics on site wordpress, we get point on page:
Tell me plase why and how create this point and how delete her ?
You might have CSS that automatically adds borders to all the images on your site.
You are using a No Javascript version of Google Analytics with an image (1x1) like this one:
<img src="http://nojsstats.appspot.com/UA-123456/your-website.com" height="1" width="1" >
You could try to adjust your CSS to remove the borders of this image.
For example you could target the relevant image source (not supported by all browsers):
img[src*="nojsstats.appspot.com"]{visibility:hidden;}
What is the best way to show along with an image a comment form, comments and other image related information with colorbox? Like in facebook's profile photos bar images?
Just opening an image node in colorbox like 'node/196?iframe=true' is much slower than opening an image.
the inline config parameter would be one solution
<style type="text/css">
.hide-colorbox{display:none}
#cboxLoadedContent .hide-colorbox{display:block}
</style>
$(".example8").colorbox({inline:true, href:"#inline_example1"});
<div id="inline_example1" class="hide-colorbox">
<p><strong>This content comes from a hidden element on this page.</strong></p>
</div>
You can either output the required html on page load and then hide with css, or you can create the content based on the page layout.
How to show loading image when a big image is being loaded?
As an example in Orkut when viewing a photo in user photo album there is a loading image shown over the photo until the Photo is completely loaded.
I need to implement that feature.
My question is how implement that feature?
Is it possible without using JQuery?
Please help.
Wrap your image in a div (or whatever you want) and set it's background image to be an animated gif or whatever loading image you want. When the image finishes loading it will cover up the background image. Easy and can be reused wherever you want.
<div class="loading">
<img src="bigimage.jpg" alt="test" />
</div>
CSS:
.loading{
background:transparent url(loadinggif.gif) center center no-repeat;
}
Here's a basic technique that you can expand upon to do more elaborate stuff with
<html>
<head>
<title>Test Page</title>
<script type="text/javascript">
onload = function()
{
// Create an image object. This serves as a pre-loader
var newImg = new Image();
// When the image is given a new source, apply it to a DOM image
// after it has loaded
newImg.onload = function()
{
document.getElementById( 'test' ).src = newImg.src;
}
// Set the source to a really big image
newImg.src = "http://apod.nasa.gov/apod/image/0710/iapetus2_cassini_big.jpg";
}
</script>
</head>
<body>
<img id="test" src="http://upload.wikimedia.org/wikipedia/commons/4/42/Loading.gif" >
</body>
</html>
Edit: Apparently, this has been deprecated. Nothing to see here, move along.
No JavaScript or CSS is necessary for this. Just use the built-in, but seldom heard-of, lowsrc property for img elements.
<img src="giant-image.jpg" lowsrc="giant-image-lowsrc.gif">
The basic idea is that you create an additional very compressed, possibly black and white version of your normal image. It gets loaded first and when the full resolution image is downloaded, the browser replaces it automatically. The best part is you don't have to do anything.
Check it out here: http://www.htmlcodetutorial.com/images/_IMG_LOWSRC.html
You could use the jQuery Lazy Loading plugin. It allows you to specify a loading image and delays the loading of large images until they are scrolled into view.
Time ago I made something like this for a similar problem:
<script>
function imageLoaded(img) {
document.getElementById('loadingImage').style.visibility='hidden';
img.style.visibility='visible';
}
</script>
...
<img id='loadingImage' src='loading.gif'/>
<img src='bigImage.jpg' style='visibility:hidden;' onload='javascript:imageLoaded(this);'/>
I think this approach has some useful advantages:
The loading image is hidden. Imagine your big image isn't so big as you expected...
You are able to do some extra things in javascript function. In my case, I stretched image width, height or both, depending on its size.