In my website (that is for baby names), 40 names are shown in each pages, and each name can have a picture that are uploaded by users.
now that number of names with pictures has increased my pages are very slow. by the way images are loaded from CDN and my concern is only for client side page load time.
first I decided to to put a 1x1 empty gif image as src and load actual images after the page load completes
<img src="x.gif" data-src="the-real-image-src.jpg" class="delayed-load" />
$(window).load(function () {
$('.delayed-load').each(function(){
$(this).attr('src',$(this).data('src'));
});
});
but later I thought that as Images are being indexed by search engines it will have a bad influence on it. so I decided not to change real srcs and just cancel loading images before they start and retry loadin after page loaded. as I researched canceling image load doesn't prevent browser download te image so this one failed too.
I can add Images after page load too but it has the same problem as the first choice (that page source doesn't contain real image links.
what would you suggest to keep it both search engine friendly and also load images after page completion?
Add a width="<value>" and height="<value>" to your img tags (in pixels). This will allow the page text content to render before the images are fully loaded. No javascript required.
<img src="x.gif" width="42" height="60" data-src="the-real-image-src.jpg" />
Note that I assume either you have the same width and height for each image, or you've stored the metric somewhere you can access it on this load.
Related
I am trying to figure out how to optimize a duplication of an image. Basically I have the same image in four different sections. However, the sections are controlled with toggle tabs, so only one shows at a time.
Is there a way for the browser to not load the image until the tab is clicked or for the browser to load the image once, rather than four times and then to just echo it?
I thought of doing something just like the following and then echoing it, but won't the image still load four times?:
$target = '<img src="../images/target.jpg" ';
I am fine with the image loading multiple times, but not on page load, to allow for reducing the initial page load for the user.
If this is confusion at all, please ask for more information.
A Useful Tutorial And Explanation
The same image will only get loaded once, the browsers doesn't load an image anew every single time the source gets mentioned, even when the alt is different
PHP
With PHP you can only influence what HTML is send to the browser. But, you want the browser to load your image after the rest of the page. With PHP, you cannot tell te browser to do so, it treats all HTML in the same way.
JS
To do the trick, the image can be loaded in after the page has been loaded. Since the image is not visible yet on the homepage, this does not matter.
To make the browser load in the image afterwards you can give an <img> a fake src and an attribute containing the real source, like so:
<img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="THE_LINK_TO_YOUR_IMAGE">
data-src now contains the real link to your image.
With the following JS you can then change out the data-src attribute to become the src attribute, after the page has loaded. The image will then load immediately after the page has finished loading:
JS
<script>
function init() {
var imgDefer = document.getElementsByTagName('img');
for (var i=0; i<imgDefer.length; i++) {
if(imgDefer[i].getAttribute('data-src')) {
imgDefer[i].setAttribute('src',imgDefer[i].getAttribute('data-src'));
} } }
window.onload = init;
</script>
The JS should come just before the last body tag, to further decrease loading time.
I have a web page which is loading more than 1000 images per page and these images are located on Amazon severs.
I have added jQuery plugins to this page which are local to the webserver, I am not using any remote JS or CSS.
When the page is loaded for the first time or refreshed the page looks distorted and images are overlapping each other. When the content is fully loaded or cached the page displays correctly.
Is there is a way to load the images in a way that will make the page look good during loading?
Display gif images while original image is loading.
Try
jQuery Image Loader
or
http://bradsknutson.com/blog/display-loading-image-while-page-loads/
Some context, I am running a script on a website's home page to swap background images on a timer. We decided it would be better to attempt to implement preloading of the images, which prompts the following issue in Firefox:
Preloading images on the first page load will not prevent the browser from loading the image from the original source again instead of the cache. Oddly though, refreshing the page will successfully cause the image to be loaded in from the cache.
The JavaScript that runs on page load takes all of the image URLs, and attempts to preload them via calling (new Image()).src = 'http:// ...'; for each one.
Inspecting the page load revealed that the images would be loaded in on page load, but then the image would also be loaded in again when the slide was revealed.
Test Image Link (SO reputation restrictions): http://i.stack.imgur.com/E9KLM.png
In the image, the images -66.png, -21.png, -63.png, and -83.png were preloaded from the JavaScript, but are then requested again when the slider reveals that slide.
What's also strange is that the bottom images look like they were queued to be loading in since the page was created. Maybe it's because this takes priority over the script that was loaded once the document was ready?
To finish off, if I was to refresh the page and jump to a slide that was preloaded with the images, but never revealed, it is shown to be loaded from the cache like it should have been originally.
My theory is that the original background images are maybe declared to needing to be loaded from the server when the page is first loaded, but aren't actually loaded until the slide is revealed. On document ready, when the javascript preloads the images, they're not cached yet so they need to be loaded from the server. Then a slide is revealed and the browser tells that image that it needs to be loaded as originally declared.
Does anyone know why this situation is occuring? If so, are there any solutions to resolve?
I have an idea that involves adding the image URLs as a data-url attribute instead, and then having javascript preload them and add them as background images at that point, but I haven't tested this yet.
For those interested, we were not able to find a perfect solution for this.
What we did notice, however, is that the images were being pulled again based on their size. The larger the image size, the more likely the image was not fetched from the cache when the image was shown to the user.
We semi-resolved this issue by compressing our background images even further, and then greatly limiting the amount of images preloaded on the first page load. We found that these two steps greatly increased the changes of the images being pulled in through the cache when needed. It also saved more bandwidth and improved page loading times in general by a significant amount.
Sometimes the HTML video on the topmost portion of my site doesn't run when user is visiting the site for the first time. This is due to the movie being loaded long after the other images files on the page have been downloaded. Until that point the request for the resource is not being sent as I can see through firebug's net extension.
Since the video is on the top of other images I want it to be downloaded first & quicker. In my HTML code as well, video is placed before the other images so why is the downloading of movie blocked for such long times ?
How should I fix this to make the movie load faster?
The movie size(of .mp4 version) is around 600Kb for 30 seconds.
I can see two possible solutions to your problem:
a) Use CSS background-image on an inline-block DIV instead of <img> elements. Background loading is run on lower priority thread(s) on almost all browsers. This way your video loading is very likely to get more priority.
b) In your <img> tags, do not specify the src attribute. Instead specify the image source in another attribute, say isrc. In your domReady callback, copy the isrc attribute to src for all images. i.e. something like:
$(document).ready(function() {
$('img').each(function() {
if($(this).attr('isrc')) {
$(this).attr('src', $(this).attr('isrc'));
}
});
});
I've got a page with a lot of images (thumbnails). You should be able to expand the images via Lightbox. I need to encourage the browser to load the image in the Lightbox before any other image (thumbnail).
I remember some articles (I can't find anymore) on how to influence the loading mechanism of the browser (use a different subdomain to allow another thread), but I'd like to know whether there might be other options (i.e. without additional subdomains).
To clarify the issue:
Example (how I'd like it to behave)
I visit the page
I click on the 3rd picture thumbnail
The 3rd picture is shown (while the remaining thumbnails are loading)
Example (how it behaves right now)
I visit the page
I click on the 3rd picture thumbnail
A spinning wheel is shown until all thumbnails are loaded
The 3rd picture is shown
Are there any tutorials/papers/views on this issue?
Just did it with using jQuery $('<img>').attr('src', ...) in my custom queue-manager which limits the browser to load images 1-by-1 thus having the capacity to load additional images that might be showing up on the page (like the one in the lightbox).