59137

Is it possible to change out an image src=“” before the original image loads

Question:

I've been looking at Javascript that can change the src of an image. I'm simply wondering if this can be done before the browser attempts to fetch the original image.

Example.

Src="Large-Image"

Can I (with javascript, I would imagine.. node.JS maybe?) serve the user src="smaller-image"?

Obviously, there would be no performance gain if the browser loads the large image first.

Answer1:

I don't think so, JS needs the image-tag to be available to access the attributes, so it has to execute later than that (Like on a documentReady or by being placed after the tag), but at that point the browser has already started downloading the image.

However, I have seen solutions where you don't set the url on the "src" attribute, but on another attribute name, like "data-src". Your Javascript can dynamically set that url to the "src" attribute to prompt the browser to start downloading.

For example (assuming jQuery is loaded):

<img data-src="http://www.url.nl/image.png" /> <script> $("img").each(function (index, element) { var $element = $(element); var imageUrl = $element.attr("data-src"); //Do your checks here to change the image-url to a smaller one when required $element.attr("src", imageUrl); }); </script>

Answer2:

If I understand jquery ready function correctly, <a href="http://api.jquery.com/ready/" rel="nofollow">ready</a>, you should be able to achive what you want.

"The handler passed to .ready() is guaranteed to be executed after the DOM is ready, so this is usually the best place to attach all other event handlers and run other jQuery code"

On the other hand <a href="http://api.jquery.com/load/" rel="nofollow">load</a>, says

"In cases where code relies on loaded assets (for example, if the dimensions of an image are required), the code should be placed in a handler for the load event instead."

So according to the docs ready is called before images are loaded, but if you can block downloading and change image paths can only a test answer.

Answer3:

You may be able to do it but not reliably and you can't leave the src blank if you want to output valid markup so would probably hurt mobile performance more than it helps.

Rather than reinvent the wheel there are a number of client and server side ways to do it that don't rely on JS (which you cannot guarantee will be enabled). All of them would be more reliable and are standards compliant (CSS media targeting for example) which would give you better results.

Answer4:

Simple solution, not overly elegant by any means. Call your function to change the image's source with the onload event.

<img id="YourID" src="PathToFirstImage" onload="YourFunction()">

Though this changes the image after it has loaded as long as the viewing browser isn't going insanely slow your audience should never even see the original image.

Recommend

  • Scan text and check whether it contains word from specified list
  • Unexpected characters returned when reading email using ImapX
  • hashmap in android xml parsing
  • PhoneGap build + jquerymobile: onclick on button does not work
  • Python PIL to extract number from image
  • Outputting SharePoint Hyperlink Column as URL
  • Floated image with variable width and heading with background image
  • Disable Kendo Autocomplete
  • How to view images from protected folder with php?
  • Automatically associate new Sonar project with custom quality profile and quality gate
  • why xml file does not aligned properly after append the string in beginning and end of the file usin
  • How to have background script and something similar to a default popup?
  • Python urlparse: small issue
  • Ajax Loaded meta Tags
  • does jqgrid support a multiple checkbox list for editing
  • Optimizing database types to compact database (SQLite)
  • HTML download movie download link
  • Cross-Platform Protobuf Serialization
  • jQuery tmpl and DataLink beta
  • Do I've to free mysql result after storing it?
  • GridView Sorting works once only
  • bootstrap to use multiple ng-app
  • How to get icons for entities from eclipse?
  • How to disable jQuery.jplayer autoplay?
  • File upload with ng-file-upload throwing error
  • NSLayoutConstraint that would pin a view to the bottom edge of a superview
  • Free memory of cv::Mat loaded using FileStorage API
  • CSS Applying specific rule for a specific monitor resolution with only CSS is posible?
  • Java static initializers and reflection
  • Setting background image for body element in xhtml (for different monitors and resolutions)
  • embed rChart in Markdown
  • Turn off referential integrity in Derby? is it possible?
  • JaxB to read class hierarchy
  • How to get NHibernate ISession to cache entity not retrieved by primary key
  • costura.fody for a dll that references another dll
  • Observable and ngFor in Angular 2
  • How can I use `wmic` in a Windows PE script?
  • UserPrincipal.Current returns apppool on IIS
  • Unable to use reactive element in my shiny app
  • java string with new operator and a literal