Using jquery in third party js code

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.

Gabriele Petrioli · Accepted Answer · 2011-05-21 07:10:01Z

2

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/

edited May 21, 2011 at 7:10

answered May 21, 2011 at 6:51

Gabriele Petrioli

197k35 gold badges275 silver badges331 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

shashuec Over a year ago

it worked..this is what I was exactly looking for..As I would be providing the code to other clients to use in their webpages.I was worried about compatibility issues.

shashuec Over a year ago

I am mainly backend engineer with little or no knowledge of JS.But as part of project I would have to handle this part myself..

Gabriele Petrioli Over a year ago

@Shashwat, we have all been there.. The proposed code is quite fail-proof in terms of conflict so its a good start.. you just need to modify the imageProcessor method to your needs.

Community · Accepted Answer · 2017-05-23 12:06:39Z

this would be much more easier to achieve with jQuery, mostly because you want to be able to distribute your script to any browser(and jQuery is a cross-browser library), but it does have it's downsides.
If it's your own project, your own page, you know exactly what and when to load/execute, but if you're giving your script to other folks, you have to think of 3 problems at least:

different libraries conflicts
This can be resolved using jquery's noConflict method, but I've seen it fail in some circumstances
same library conflicts
Say that the user already has loaded version X of jQuery. You oblige him to load version Y too, and besides the fact that this would be very inefficient, it may cause conflicts between different jQuery versions.
There are workarounds for this( to check if jQuery exists and load it asynchroniously if it doesn't) but the code gets a bit more complicated.
code size
When i think of a third party piece of code, I'm thinking...hmm a few kb to load to be able to run a function, but if you want to use jQuery, you may be forcing the one who uses your script to load a whole library just for your one functionality instead of a 1-2 kb (needles to say what the implications are if the user has a slow connection)

Having both the ups and downs in mind, it really depends on what are you doing, so, as Gaby aka G. Petrioli said, " if the processing does not involve jQuery then do not use it".

systemizer · Accepted Answer · 2011-05-21 06:46:40Z

0

JQuery is much more convenient than plain javascript. You don't have to worry about cross-browser compatibility (e.g. IE vs. Firefox vs. Chrome). I would recommend this over javascript unless you are want to handle that yourself :)

You can load in the Jquery library, but that might be a little heavy than what you're looking for. Also, you will need to fetch the library from a server, which adds another point of failure (however, if you host this on your own server, then you will have more control).

TLDR: JQuery is convenient. If you have access to it, then you should use it.

answered May 21, 2011 at 6:46

systemizer

3552 silver badges6 bronze badges

Collectives™ on Stack Overflow

Using jquery in third party js code

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related