Show multiple images in JSP page

abc73 · Apr 21, 2005

I have an Application in which I am showing images in a jsp page from a Database. It takes forever to load over 400+ images and sometimes it only shows half and the rest just small boxes.

I have a bean in which I get the imagenames from DB based on the query and stores in a hashtable then inside a JSP page I have a for loop that calls a servlet passing an image-name a time and the servlet returning the jpeg image.

Is there a way to show 25 images a time and NEXT and PREVIOUS buttons so the user can move arround. Can someone tell me how to implement this functionality as I don't want to show all the images once and rather show in a junk i.e. 25 images a time. Any help is really appreciated.

Thanks.

venur · Apr 22, 2005

Hi,

Hope this thread will help you Thread695-754786

if you not you can use(display)

http://displaytag.sourceforge.net/

or (Pager)

http://jsptags.com/tags/navigation/pager/index.jsp.

Cheers
Venu

venur · Apr 22, 2005

Hi,

But I suggest you to read the required number of images at a time insted of reading and loading all the images into a Hashtable at time.

Cheers

abc73 · Apr 22, 2005

I looked into the thread but I am getting Images from database and it can be huge number of them. So don't know if it's wise to store them in an ArrayList. As I haven't used the taglibs before so believe there's a learning curve but I don't have enough-time. I am hoping if I can atleast tweak my current code a little and make it functional and mean-time can continue looking into taglibs. Here is a sample snippet of the code and current scenario:

It takes forever to load over 400+ images and sometimes it only shows half and giving an error "Ranout of Virtual Memory" and the rest of the images just small "X" .

Code:

<%@ page contentType="text/html;charset=windows-1252"%>
<%@ page import="java.util.*" %>
<jsp:useBean id='image' scope='application' class='MYForm.Images'/>
<% image.dbConnection() %>
<html->
  <head->
    <meta- http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title->untitled</title->
  </head->
  <body valign=center->
  
  <%
	String imgName = request.getParameter("Name");
	String imgId = request.getParameter("Id");
	String imgacc = request.getParameter("acc");
	Hashtable imagenames = image.getNames(imgName, imgId, imgacc);
	//I am calling the bean method passing the above values to get all the image names from a
	//DataBase that don't match the above criteria. A hashtable with image names is returned by a bean.
 
	//Here I check if Hashtable is not empty and then proceed as follows....
	..................
	.................
	enum = imagenames .elements ();
        while(enum.hasMoreElements ())
        {
           s = (String) enum.nextElement ();
  %>
        
            
<!-- calling a servlet with the imagename to show the image-->		
<-img src="servername:port/contextpath/servlet/getImage?imgname=<%= s %> width=640>
            
        
  <%
      }
      
      //here I do some clean-up that is close any DB connections if open, etc..
      ...........
      .............
      session.invalidate();
      
     //Now if I have 1000 images I am calling a servlet thousand times that in-turn hits the DB to retreive the image
     //but this process is very slow and that's why half the image show and the rest half doesn't giving VM error.
  %>	 	 
      
  </body->
</html->

Any help is really appreciated.
Thanks

venur · Apr 22, 2005

Hi,

If you are storing just the image names in Hashtable it will not use much of memory. But what does this line of code does
<-img src="servername

ort/contextpath/servlet/getImage?imgname=<%= s %> width=640>

Does it return you output stream?

If your showing the images which are part of your webapplications then you can always use
<img src="<%=s%>"/> where "s" is the file name. This should be fast enough. until the image are of bigger size.

Cheers
Venu

abc73 · Apr 22, 2005

In the following line I am passing an image name a time to a servlet that returns me the image and I am showing it in a page. If I have 500 image-names in the hashtable the following line will execute 500 times. Here is what I am doing.

Code:

.....................
..................
while(enum.hasMoreElements ())
{
    s = (String) enum.nextElement ();
%>
   <tr>
	<td align="center" width="90%">
   <img src="servername:port/contextpath/servlet/getImage?imgname=<%= s %> width=640>
        </td>
   </tr>
<%
}
.......
..........
%>

Actually I have form where a user inputs the search criteria and based on that all images are to be shown. The search can return 1 or 10 or 500 or any number of images and then I show them in a table. The image size also vary can big or small. But there's a performance issue so would like to show 25 images a time and add PREVOIUS & NEXT buttons. Any help is really appreciated.

Thanks

venur · Apr 22, 2005

Hi,

Read the Comments and change them as per your requirement.

Code:

<%@ page import="java.util.ArrayList,
                 java.util.Iterator,
                 java.util.List,
                 java.util.Hashtable"%>
<%
    ArrayList arrayList = null;

    /* Start of comments that need to removed */
    Hashtable hashtable = new Hashtable(50);
    for(int i=0; i<50 ; i++)
    {
        hashtable.put(i+"","Image Name"+i);
    }
    arrayList = new ArrayList(hashtable.values());
    /* End of Comment code that needs to be removed */

    // UNCOMMENT BELOW CODE
    /*
     if(null != request.getParameter("Name"))
     {
       //Get the Hashtable from the DB if requestParameter is null
       Hashtable imagenames = image.getNames(imgName, imgId, imgacc);
       //Get the values from Hashtable and store it in ArrayList
       arrayList arrayList = new ArrayList(imagenames.values());
      //Store the ArrayList into session Object so that you can avoid DB calls from second call to the same page
       session.setAttribute("arrayList", arrayList);
     }else{
      // get the ArrayList from session
        arrayList = (ArrayList)session.getAttribute("arrayList");
     }
     */

    boolean check = true;
    int arrayListSize = arrayList.size();
    // Number of Records that need to displayed per page
    // make the increment value 5 and check it will display only 5 records per page
    int increment = 2;
    int fromIndex = 0;
    int toIndex = increment;
    String uri = request.getRequestURI();
    String previous= "Previous";
    String next = "Next";
    List displayList = null;
    if( null != request.getParameter("next"))
    {
        fromIndex = Integer.parseInt(request.getParameter("next"));
        toIndex = increment + fromIndex;
        if( toIndex+1 > arrayListSize)
        {
            toIndex = arrayListSize;
            check = false;
        }
        if( fromIndex > arrayListSize)
            fromIndex = 0;
    }

    if( null != request.getParameter("prev"))
    {
        toIndex = Integer.parseInt(request.getParameter("prev"));
        fromIndex = toIndex - increment;
    }

   if(arrayListSize > 0)
    {
      if(increment > arrayListSize){
        toIndex = arrayListSize;
        displayList = arrayList.subList(fromIndex, toIndex);
        toIndex = 0;
      }else{
          displayList = arrayList.subList(fromIndex, toIndex);
      }
   }
    if(fromIndex != 0)
       previous = "<a href="+ uri +"?prev="+ fromIndex +"> Previous </a>";
    if(toIndex != 0 && check)
       next = "<a href="+ uri +"?next="+ toIndex +"> Next </a>";

    out.println("Total Size of ArrayList is " + arrayListSize);
    out.println("<br>");
    //out.println(displayList);

   /* out.println("<br>");
    out.println(next);
    out.println("<br>");
    out.println(previous); */
%>

<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="43%" id="AutoNumber1">
 <caption><%=arrayListSize%></caption>
  <tr>
    <td width="53%">
    <p align="center"><%=next%></td>
    <td width="47%">
    <p align="center"><%=previous%></td>
  </tr>
  <% Iterator iterator = displayList.iterator();
    while(iterator.hasNext()){
        String s = iterator.next().toString();
  %>
   <tr>
    <td width="100%" colspan="2"><img src="servername:port/contextpath/servlet/getImage?imgname=<%=s%>" width="640"></td>
   </tr>
   <%
    }%>

</table>

cheers
Venu

abc73 · Apr 22, 2005

Thanks Venu I'll try this and will let you know. Thanks again.

abc73 · Apr 23, 2005

I have one concern if I add my ArrayList to session is there a possibilty of loosing a session, and how do I make sure my session remains valid.

venur · Apr 24, 2005

Hi,

If you are concern about the session put an extra condition which checks for arrayList in session, if it does not exists
1) DB
2) Get Hashtable
3) Store the arrayList into session.

But u need to store the request Parameters as hidden parameters.

Cheers
Venu

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Show multiple images in JSP page

abc73

Programmer

venur

MIS

venur

MIS

abc73

Programmer

venur

MIS

abc73

Programmer

venur

MIS

abc73

Programmer

abc73

Programmer

venur

MIS

Similar threads

Part and Inventory Search

Sponsor