Question

First of all I am new to javascript so this question might be stupid.
I have a requirement where i would provide a js script to other websites to include in their webpages.

Now my question is should I use jquery or plain javascript.Will/Can jquery effect the rest of the functionality of the site.
Plus what is the benefit I will get using jquery over plain javascript.

My requirement is to get all images of the website and do some processing on the images on these websites.

Thanks in Advance.

Answer 1

I would say, if the processing does not involve jQuery then do not use it.

You need to deal with the following issues if you include it

• failure to load (for network reasons)
• conflict with other versions locally loaded
• conflict with other libraries locally loaded

All issues have workarounds/solutions but you have to implement each an everyone of those.

If you just need to find all images in page, then you can use the .getElementsByTagName() method

var imagelist = document.getElementsByTagName('img');

and just do the processing on that..

You might need of-course to attach your code at the load event to be sure that whatever your code does, the DOM is ready to accept it..

for modern browsers that would be .addEventListener(), while for IE it would be .attchEvent()

your script could be something like this

(function(){ // wrap in a self-invoking function to avoid global name-space pollution

  // attach to the load event so out code runs once the page has loaded
  if (window.addEventListener) { // modern
    window.addEventListener('load', imageProcessor, false);
  }
  else if (window.attachEvent) { // IE
    window.attachEvent('onload', imageProcessor );
  }

  function imageProcessor(){
    // get all images
    var imagelist = document.getElementsByTagName('img');

    // loop the list of images to do something with each image
    for (var img = 0; img < imagelist.length; img++)
     {
       var currentImage = imagelist[img];
       // do processing on the currentImage which hold a reference to the image
     }
  }

})(); // do the self-invoking

demo: http://jsfiddle.net/gaby/nXPzk/