'no image' icon while outputting AJAX-delivered content

Question

I use AJAX requests to retrieve data from mySQL (link), after that I build a sequence of post. Every post has a feature image. So while in process of outputting the posts, the visitor sees 'no image' sign:

noImage .

This lasts for a bit of second, but looks bad.

How can I prevent this sign from showing, or subtitute with a loading spin?

jQuery part for outputting the results

function postsBuilder(posts){
var contents ='';
$.each(posts, function(k, field){
    if(field.link[field.link.length-1] == '/') {field.link = field.link.slice(0, field.link.length-1)};
    contents += '<div class="post-container">';
//here I output the feature image
    contents += "<div class='col_1'><div class='post_image'><img src='/images/icons/id_" + field.id + ".png'></div></div>";
    contents += "<div class='col_2'><div class='post_name'><a class='post_name_link' target='blank' href=http://" + field.link + ">" + field.name + "</a></div>";
    contents += "<div class='post_link'>" + field.link + "</div>";
    contents += "<div class='post_content'>Content: " + field.content + "</div>";
    if ( field.video.indexOf('you') >-1 )  {contents += "<div class='post_video'><a data-toggle='lightbox' href=" + field.video + ">Video</a></div>";}
        contents += "</div></div><br />";         
});
return contents;    

}

One of examples when the function is called

$.ajax({cache:false,
               url:str,
               beforeSend: function() { $('#loadingDiv').show(); },
               complete: function() { $('#loadingDiv').hide(); },
               dataType :'json'})
               .done(function(result){
                  var i, j, m=0;
                  var div_content="";
                  div_content += "<div><b>Category: ".concat(result[0].category).concat("</b></div>");
                  posts_array = [];
                  for (i=0,j=result.length; i<j; i+=size) { // slice whole JSON result into portions of at maximum 'size' posts in each
                    posts_array.push(result.slice(i, i+size)); 
                    m++;            
                  }
                  div_content += postsBuilder(posts_array[0]);
                    ...
                  $("#content").html(div_content);              
               });

It is exactly what you want. You just need to make it work for you. — Anonymous, May 23 '14 at 20:10

score 1 · Answer 1 · edited May 23 '17 at 12:20

1

Use the error event for images:

$(document).on('error', 'img', function () { 
    $(this).hide();
    // or $(this).css({visibility:"hidden"}); 
});

Check out How to silently hide "Image not found" icon when src source image is not found

edited May 23 '17 at 12:20

Community

1
1

answered May 23 '14 at 19:03

AmmarCSE

30,079
5
45
53

Just checked this solution, doesn't work for me. Maybe because that my 'no image' is like FOUC, it's not static. – artildo May 23 '14 at 19:07
@artildo, what do you mean by FOUC? – AmmarCSE May 23 '14 at 19:09
A flash of unstyled content (FOUC) is an instance where a web page appears briefly with the browser's default styles prior to loading an external CSS stylesheet, due to the web browser engine rendering the page before all information is retrieved. (http://en.wikipedia.org/wiki/Flash_of_unstyled_content) – artildo May 23 '14 at 19:15
I replied above, unfortunately your_name is not printable in the comment above – artildo May 23 '14 at 19:17
@artildo, check out my updated answer. I changed to 'on' so all future error events for images will be handled. – AmmarCSE May 23 '14 at 19:19
You know, looks like workin in 95%, I still keeping observing the effect, but seems in fewer cases (random clicking breaks the nice picture). Thank you so much, AmmarCSE! – artildo May 23 '14 at 19:26

'no image' icon while outputting AJAX-delivered content

1 Answers1