Preloading img elements - javascript

I currently have a preloading image javascript script:
function MM_preloadImages() {
var d = document;
if(d.images){
if(!d.MM_p )
d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments;
for(i=0; i<a.length; i++){
if (a[i].indexOf("#")!=0){
d.MM_p[j]=new Image;
d.MM_p[j++].src= '/img' + a[i];
}
}
}
}
The problem is that i have to manually update the array when images are added deleted etc.
Is there anyway of automating this or is there a library.
Most of the image urls are element hrefs.
Obviously I could write something server side but I want to check if there is something out there already.

Here is someone who did what you are trying to do with jQuery:
http://www.filamentgroup.com/lab/update_automatically_preload_images_from_css_with_jquery/
Edit: Actually this is not quite what you are looking for as this preloads images from CSS files - I am going to leave this here in case this is still helpful.

The trouble is by the time the elements are available in the DOM for JS to inspect the images are already being loaded anyway.
AFAIK there is no way to do this (the CSS based inspection works because that's loaded before the body content), but a superior solution for the problem in general is CSS spriting.

Related

Jquery to pure JS

I have some script in jquery, but i have a problem that on page i dont use Jquery, this is just example what i need, it is much more complex.
$('img').each(function(){
$(this).removeAttr('width');
$(this).removeAttr('height');
$(this).addClass('img-responsive');
});
It is for moving attributes from images and adding class responsive, because user uses a lot TinyMce and by default it is putting witdh and height. I know maybe there is some plugin for TinyMce but i need some common solution
This should work but you may need to modify for all browsers:
document.querySelectorAll('img').forEach(function (e) {
e.removeAttribute('width')
e.removeAttribute('height')
e.classList.add('img-responsive')
})
See documentation for compatibility:
Element.removeAttribute
Element.classList
Array.prototype.forEach
var images = document.querySelectorAll("img");
for (var i = 0; i < images.length; i++) {
images[i].removeAttribute("width");
images[i].removeAttribute("height");
images[i].classList.add("img-responsive");
}

Is there a better way to handle loading arrays of images?

I have groups of related images that I would like to be able to change (but position in the same div) by clicking on different radio buttons.
Currently I am using arrays to handle the html,
var marketingImages = [image1HTML, image2HTML, image3HTML, image4HTML];
var salaryImages = [image1HTML, image2HTML, image3HTML, image4HTML];
And when a relevant radio button is clicked, a function runs to clear the html in the div (of possible previous images), and load the new images using .append.
$(document).ready(function() {
$("#marketing, #salary").click(leed);
function leed() {
$("#portfolio-images").html("");
if ($("#marketing").is(':checked')) {
var portfolioArray = marketingImages;
} else if ($("#salary").is(':checked')) {
var portfolioArray = salaryImages;
}
for (var i=0; i<portfolioArray.length; i++) {
$("#portfolio-images").append(portfolioArray[i]);
}
...
}
It seems to work well, but being a noob though I have to wonder if there's a better way to handle this. Technically these images are just thumbnails (that can be clicked on to load larger Lightbox versions), but I'm unsure of how well that would "really" load for someone.
Does somebody know if there's a better way to handle loading groups of images? Thanks.

Automated DD Belated png script

I've been using http://www.dillerdesign.com/experiment/DD_belatedPNG/ for a while now and it has solved most of my IE6 png headaches.
I wonder though, whether there is a way of automating it so that I don't have litter my code with class="png" or adding the ids of html elements using background images to a JS file. - I don't care really that this would slow IE6 down - It's easier to explain to a client that the website is slow due to their browser than it is to explain why everything has a grey background!
I'm not really a JS expert but I guess grabbing the src attribute and adding the file name to the class isn't difficult. - Somehow parsing the CSS and and adding the id of the containing element sounds difficult if not impossible though??
This isn't tested but here is my jQuery solution which should work. It basically checks all img elements for a .png extension then checks all elements except img for a background image with a .png extension
You may need to add in extra code to check for CSS background property as well as background-image. With the body * selector I would imagine a lot of overhead on pages with lots of elements but I'm with you, I don't care how long it takes IE6 users to load the page if they don't care about updating their browser
$(function() {
$('img').each(function() {
if(this.src.split('.').pop() == 'png') {
DD_belatedPNG.fixPng(this)
}
});
$('body *:not(img)').each(function() {
if($(this).css('background-image').split('.').pop().replace(/("|\')\)/,'') == 'png') {
DD_belatedPNG.fixPng(this);
}
});
});
EDIT: I found this quite an interesting challenge so wrote up a pure JavaScript solution. It needs to be run when the DOM is ready though, so if you really don't want to use jQuery or another framework with a DOM ready function you'll have to use Dean Edwards' method, like so:
document.write('<script type="text/javascript" id="domready" defer="defer" src="javascript:void(0)"><\/script>');
document.getElementById("domready").onreadystatechange = function() {
if (this.readyState == "complete") {
var imgs = document.getElementsByTagName('img')
for(i=0; i < imgs.length; i++) {
if(imgs[i].src.toLowerCase().search(/\.png$/) != -1) {
DD_belatedPNG.fixPng(imgs[i]);
}
}
var children = document.body.getElementsByTagName('*');
for(i=0; i < children.length; i++) {
var bg = children[i].currentStyle.backgroundImage;
if(bg != 'none' && bg.toLowerCase().search(/\.png("|\')?\)$/) != -1) {
DD_belatedPNG.fixPng(children[i]);
}
}
}
}

delay images for display purposes not efficiency using javascript?

I have run into numerous sites that use a delay in loading images one after the other and am wondering how to do the same.
So i have a portfolio page with a number of images 3 rows of 4, what i want to happen is for the page to load,except for the images in img tags. Once the page has loaded i want images 1 of each row to load then say 0.5 seconds later the next image in the row(s) and so no. I'm going to have a loading gif in each image box prior to the actual image being displayed.
I know its doable but cant seem to find the term for doing this. This is purely for looks as it is a design site.
Thanks for the help.
This is very easy to do in jQuery
$('img').each(function(i) {
$(this).delay((i + 1) * 500).fadeIn();
});
Fiddle: http://jsfiddle.net/garreh/Svs7p/3
For fading in rows one after the other in a table it just means changing the selector slightly. Remember to change from div to img -- I just used div for testing
$('tr').each(function(i) {
$('td div', this).delay((i + 1) * 500).fadeIn();
});
Fiddle: http://jsfiddle.net/garreh/2Fg8S/
Here is what you can do, you can load the image tags with out the src and using a custom property:
<img alt='The image' path='image/path.jpg' />
then you can use javascript to load the images when the site is loaded or whenever you please;
// simplified
window.onload = function () {
var images = document.getElementsByTagName('img');
// loop and assign the correct
for (var i =0; i < images.length;i++){
var path = images[i].getAttribute('path');
images[i].src = path;
}
}
I hope you get the concept of how the images are delayed
**please note the path attribute is not a standard one.
The easiest way I can think to do this is to have a table set up that will eventually hold the image tags, but have none on load. Javascript can loop through an array of image urls, and insert those image tags into random locations on the table.
If you want to have the delay, setInterval is the perfect tool. http://www.w3schools.com/jsref/met_win_setinterval.asp
// You can hard-code your image url's here, or better still, write
// a server-side script that will read a directory and return them
// so it is fully dynamic and you can add images without changing code
unpickedImages = array();
// Start loading
loadAllImages = setInterval( insertImage, 600 );
function insertImage() {
if( unpickedImages.length > 0 ) {
var imageUrl = unpickedImages.shift();
// pick empty x, y on your table
// Insert the image tag im that <td></td>
} else {
clearInterval( loadAllImages );
}
}
You really don't need javascript to do this. If you specify the image sizes in the HTML or CSS, the browser will layout and display the page while loading the images, which will likely be loaded in parallel. It will then display them as soon as it can.
That way if users re-visit your site and have the images cached, they all show up immediately. If you have a script to load the images after a delay, you are making visitors wait for content unnecessarily and all their efforts to have a faster browser and pay for a fast internet connection has gone to waste.

Is this the right way to preload images?

Is this below the right way to preload images?
I have a table which changes background once a 'select option' is changed.
In the body of my page, I have this:
<body onload="preload();">
And in my Form on the same page I have:
<select onchange="swap();"><option bla bla></select>
And the js:
function preload(){
pic = new image(720, 65);
pic.src = '../picture.jpg';
}
function swap(){
document.getElementById("table_id_here").style.backgroundImage = '../picture.jpg';
}
In the function swap() I guess the picture.jpg file is already preloaded, is that right?
Is there any way to check if the image has actually been cached (preloaded)?
Load the image with CSS either by using a sprite or by using display:none to hide it. A bit less to do on the js front then.
Use something like Firebug's network tool to check if those images are loaded.
(source: getfirebug.com)
I guess your codes should work, anyway this is a popular script used by Dreamweaver for image preloading:
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
MM_preloadImages('img1.gif','img2.gif'); //add more if required
The word "image" should be capitalized in the second line of your preload function, like this:
pic = new Image(720, 65);
Remember that you're creating a new Image object by calling its constructor -- that's what loads it in the browser.
So if it's not capitalized, you're invoking a separate function that may or may not exist.

Categories