Lazylist hides other images while scrolling if not all images are included

I used this example to make a Lazylist: Lazy load of images in ListView

But in my list not all rows have images. So I updated the code inside the adapter to hide the imageview if there is no image:

public View getView(int position, View convertView, ViewGroup parent) {
    View vi=convertView;
    if(convertView==null)
        vi = inflater.inflate(R.layout.item, null);

    TextView text=(TextView)vi.findViewById(R.id.text);;
    ImageView image=(ImageView)vi.findViewById(R.id.image);
    text.setText("item "+position);
    if(data[position].contains(".jpg") || data[position].contains(".png"))
    {
        imageLoader.DisplayImage(data[position], image);
    }else
        image.setVisibility(image.GONE);
    return vi;
}

To test this I omitted one image as follows:

private String[] mStrings={
        "http://a3.twimg.com/profile_images/670625317/aam-logo-v3-twitter.png",
        "",
        "http://a3.twimg.com/profile_images/121630227/Droid_normal.jpg",
.....

However, after running the app, I noticed that the list began to hide other images too while scrolling with a strange behavior. You can simulate the problem by just making the above two changes to the code and test the list.

You are not resetting the state.

if(data[position].contains(".jpg") || data[position].contains(".png"))
{
    image.setVisibility(View.VISIBLE);
    imageLoader.DisplayImage(data[position], image);
}else{
    image.setVisibility(View.GONE);
}

Also I would advise a loading state where the image is set to default drawable or a progressbar is shown instead of the image.