jQuery Best Practice:  Can I/Should I test for file not found error 404?

Posted on 2012-04-08
Last Modified: 2012-06-27
I'm programatically appending table rows with the following code:

$.getJSON('cfc/schoollibraries.cfc?method=getLibraryList&returnformat=JSON', function(json) {
 var myHTML = '';
  $.each(json.DATA, function(i,col) {
   myHTML += '<tr><td>' + col[0] + '</td><td>' + col[1] + '</td><td><img src="/images/sponsoredlibraries/' + col[2] + '" width="80"></td><td>' + col[3] + '</td></tr>';
  $('#tsTable tbody').append(myHTML);

Many of the referenced image files have not yet been uploaded, so I get many 404 errors when the script tries to load "missing" image files.

Is it possible in the $.each loop to first test if the file exists and then only execute the '<img src="/images/sponsoredlibraries/' + col[2] + '" width="80">' part of the code if it does in fact exist so that I then avoid getting the 404 errors?

If it can be done, should it be done (is it best practice) or does it not really matter?  (Would the additional time in testing for each file's existence in the looping offset the time of getting the failed 404 error messages)?

Hope this makes sense.
Question by:ShanghaiD
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
LVL 23

Expert Comment

ID: 37820770
best practice would be not to reference images that don't exist in the first place. i.e. "getLibraryList" should return a clean list of images that excludes images that don't exist yet.

if that is simply not possible then i would suggest the overhead of making the http request to the server just to check if the image exists would negate the benefits and you may as well just get the 404s.
LVL 20

Accepted Solution

BuggyCoder earned 500 total points
ID: 37820968
you can make an ajax call for each image you get and process only if the call is successfull like this:-
$.each(json.DATA, function(i,col) {
   var imagePath = "/images/sponsoredlibraries/' + col[2];
    error: function()
        //file not exists
    success: function()
           myHTML += '<tr><td>' + col[0] + '</td><td>' + col[1] + '</td><td><img src="/images/sponsoredlibraries/' + col[2] + '" width="80"></td><td>' + col[3] + '</td></tr>';
  $('#tsTable tbody').append(myHTML);

Open in new window

Refer here for more details:-

Author Closing Comment

ID: 37821641
Thank you! Exactly what I was looking for.

Featured Post

Why Off-Site Backups Are The Only Way To Go

You are probably backing up your data—but how and where? Ransomware is on the rise and there are variants that specifically target backups. Read on to discover why off-site is the way to go.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Requirements JQuery 1.6+ HTML CSS Introduction This article was inspired by an EE question ( on how to make a page show some balloons animate up a page…
Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

732 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question