is this function that i wrote in jquery, will be a good way to preload? thank you  function loader(){          imgTag('#check');          function imgTag(whereToAppend){             var image = 'image.jpg';              $(whereToAppend).append('&lt;img id="imgWrapper"&gt;');              $('#imgWrapper').attr('src', image).hide().one('load',function(){                 $(this).fadeIn('slow');             })         }       }
10283
I'm looking for a quick and easy way to preload images with JavaScript. I'm using jQuery if that's important.  I saw this here ():  function complexLoad(config, fileNames) {   for (var x = 0; x &lt; fileNames.length; x++) {     $("&lt;img&gt;").attr({       id: fileNames[x],       src: config.imgDir + fileNames[x] + config.imgFormat,       title: "The " + fileNames[x] + " nebula"     }).appendTo("#" + config.imgContainer).css({ display: "none" });   } };   But, it looks a bit over-the-top for what I want!  I know there are jQuery plugins out there that do this but they all seem a bit big (in size); I just need a quick, easy and short way of preloading images!
35836
I want to know when an image has finished loading. Is there a way to do it with a callback?  If not, is there a way to do it at all?
27396
The following are two methods of building a link that has the sole purpose of running JavaScript code. Which is better, in terms of functionality, page load speed, validation purposes, etc.?    function myJsFunc() {     alert("myJsFunc"); } &lt;a href="#" onclick="myJsFunc();"&gt;Run JavaScript Code&lt;/a&gt;     or    function myJsFunc() {     alert("myJsFunc"); }  &lt;a href="javascript:void(0)" onclick="myJsFunc();"&gt;Run JavaScript Code&lt;/a&gt;
37877
I have an image URL in a imageUrl variable and I am trying to set it as CSS style, using jQuery:  $('myObject').css('background-image', imageUrl);   This seems to be not working, as:  console.log($('myObject').css('background-image'));   returns none.  Any idea, what I am doing wrong?
60509
We are using the following technique to lazy load images in our site:  For all images we put in the src attribute a url for a default img (i.e. a loader) and put the actual image url in the data-src attribute. Like so  &lt;img src="loader.gif" data-src="img1.jpg" /&gt;   When the image is outside of the viewport nothing happens, but when the image goes inside the viewport, then the url from the data-src attribute is loaded and the image is correctly shown.  This has as a result that Google sees all the images in the page (i.e. a search results page) as having the same src attribute. Because the google bot of course parses only the 'unloaded' img tag with the default src.  My question is: does having many img tags with the same src attribute affect the SEO of the page?
8791
I know there are many ways to prevent image caching (such as via META tags), as well as a few nice tricks to ensure that the current version of an image is shown with every page load (such as image.jpg?x=timestamp), but is there any way to actually clear or replace an image in the browsers cache so that neither of the methods above are necessary?  As an example, lets say there are 100 images on a page and that these images are named "01.jpg", "02.jpg", "03.jpg", etc. If image "42.jpg" is replaced, is there any way to replace it in the cache so that "42.jpg" will automatically display the new image on successive page loads? I can't use the META tag method, because I need everuthing that ISN"T replaced to remain cached, and I can't use the timestamp method, because I don't want ALL of the images to be reloaded every time the page loads.  I've racked my brain and scoured the Internet for a way to do this (preferrably via javascript), but no luck. Any suggestions?
120812
I'm working on a site where I am being asked to implement a loading animation on page loads. Essentially, the site will display a loading animation as soon as possible, which will go away once all of the assets (images, essentially) have been loaded.   I'm worried that this will actually reduce usability, but am very interested in any data on this. I want to know the "right" answer.  Essentially I have two feelings:   If images further down the page are still loading, I as a user, don't care. I want to start consuming any content as soon as it's available. From this perspective, hiding the site until everything is loaded would actually reduce perceived performance.  The browser already gives a good indication that the site is still loading. Users are at least subconsciously aware of this and are used to some things appearing after the initial render.    I've seen this sort of thing often on single page javascript applications where I think it makes a lot more sense. The user has an initial loading page, and afterwards the application is ready to go with all assets loaded. But, seeing a loading image every time you click a link feels a bit off to me.   I am very interested in opinions or data from people more knowledgeable and experienced in UX than myself.
25651
For all major browsers (except IE), the JavaScript onload event doesn’t fire when the page loads as a result of a back button operation — it only fires when the page is first loaded.  Can someone point me at some sample cross-browser code (Firefox, Opera, Safari, IE, …) that solves this problem? I’m familiar with Firefox’s pageshow event but unfortunately neither Opera nor Safari implement this.
97201
I have something like this:  &lt;div class="content"&gt;     &lt;a href="#"&gt;A&lt;/a&gt; &lt;/div&gt; &lt;div class="content"&gt;     &lt;a href="#"&gt;B&lt;/a&gt; &lt;/div&gt; &lt;div class="content"&gt;     &lt;a href="#"&gt;C&lt;/a&gt; &lt;/div&gt;   When one of these links is clicked, I want to perform the .hide() function on the links that are not clicked. I understand jQuery has the :not selector, but I can't figure out how to use it in this case because it is necessary that I select the links using $(".content a")  I want to do something like  $(".content a").click(function() {     $(".content a:not(this)").hide("slow"); });   but I can't figure out how to use the :not selector properly in this case.
40988
I'm doing it right now with the following code:   function uw_load_scripts() {     // De-register the built in jQuery     wp_deregister_script('jquery');     // Register the CDN version     wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js', array(), null, false);      // Load it in your theme     wp_enqueue_script( 'jquery' ); } add_action( 'wp_enqueue_scripts', 'uw_load_scripts' );   This works, but should I do this for everyone, like this, or for everyone but admin (so that backend uses the WordPress version?):  if (function_exists('load_my_scripts')) {   function load_my_scripts() {       if (!is_admin()) {       wp_deregister_script( 'jquery' );       wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js', array(), null, false);      wp_enqueue_script('jquery');        }   }   }   add_action('init', 'load_my_scripts');   This version doesn't work at all actually, I get the WordPress jQuery-version and not the Google one.  Therefore, should I deregister the jQuery that is included in WordPress at all?    Also, how do I add my own scripts (slider scripts, modernizr and my own custom.js) the correct way? I guess I should do this via functions.php as well and not in the header like I'm doing it now, but I'm unsure of how I would do that.
9926
What is the best method in jQuery to add an additional row to a table as the last row?  Is this acceptable?  $('#myTable').append('&lt;tr&gt;&lt;td&gt;my data&lt;/td&gt;&lt;td&gt;more data&lt;/td&gt;&lt;/tr&gt;');   Are there limitations to what you can add to a table like this (such as inputs, selects, number of rows)?
85862
This page does it the way I want it to:   But I want to find a better way using jQuery, can anyone point me to a good script that uses jQuery to accomplish this?
23351
Is it possible to dynamically create and modify images on a per pixel level in JavaScript (on client side)? Or has this to be done with server based languaged, such as PHP?   My use case is as follows:   The user opens webpage and loads locally stored image A preview of the image is displayed The user can modify the image with a set of sliders (pixel level operations) In the end he can download the image to his local HDD   When searching in the web I just found posts about using IE's filtering method, but didn't find anything about image editing functions in JavaScript.
34246
I have a layout similar to this:  &lt;div id="..."&gt;&lt;img src="..."&gt;&lt;/div&gt;   and would like to use a jQuery selector to select the child img inside the div on click.  To get the div, I've got this selector:  $(this)   How can I get the child img using a selector?
41163
I'm wondering what the preferred method is for dealing with AJAX calls. Should one use the same plugin php file to process the POST or a separate one? Which is cleaner or safer?
88861
I don't want to use jQuery, but I'd like to use Ajax to do file uploading. Is that possible?  If so, where can I find information/tutorial on it?
49974
How can you reliably and dynamically load a JavaScript file?  This will can be used to implement a module or component that when 'initialized' the component will dynamically load all needed JavaScript library scripts on demand.  The client that uses the component isn't required to load all the library script files (and manually insert &lt;script&gt; tags into their web page) that implement this component - just the 'main' component script file.  How do mainstream JavaScript libraries accomplish this (Prototype, jQuery, etc)?  Do these tools merge multiple JavaScript files into a single redistributable 'build' version of a script file?  Or do they do any dynamic loading of ancillary 'library' scripts?  An addition to this question: is there a way to handle the event after a dynamically included JavaScript file is loaded?  Prototype has document.observe for document-wide events. Example:  document.observe("dom:loaded", function() {   // initially hide all containers for tab content   $$('div.tabcontent').invoke('hide'); });   What are the available events for a script element?