Glide: Loading image from url taking too much time

[adisofttech]

Glide Version:3.7.0

Integration libraries: volley 1.0.0

Device/Android Version: fails on samsung galaxy s4 5.0.1

Issue details / Repro steps / Use case background:

I am showing images in listview which has image(120*120) and also showing full image in detail view
when loading images taking too much time. Average original images size is around 300-400 KB

Glide Code:

In Listview

            Glide.with(ctx)
                    .load(item.getUrl())
                    .placeholder(R.drawable.defulthome)
                    .fitCenter()
                    .diskCacheStrategy(DiskCacheStrategy.ALL)
                    .error(R.drawable.defulthome)
                    .into(holder.photo);

In DetailView

            Glide.with(ctx)
                    .load(list.get(position))
                    .placeholder(R.drawable.defulthome)
                    .error(R.drawable.defulthome)
                    .diskCacheStrategy(DiskCacheStrategy.SOURCE
                    .dontAnimate()
                    .into(img);

Layout XML:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/light_gray_header_color"
    android:id="@+id/list_item"
    android:padding="5dp">

    <ImageView
        android:id="@+id/photo"
        android:layout_width="120dp"
        android:layout_height="120dp"
        android:scaleType="centerCrop"
        android:src="@drawable/defulthome"/>


    <TextView
        android:id="@+id/tv_type"
        android:layout_alignParentRight="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@android:color/holo_green_dark"
        android:textColor="@android:color/white"
        android:textSize="15sp"
        android:padding="3dp"
        android:text="For Sale"/>


    <TextView
        android:id="@+id/tv_price"
        android:layout_toRightOf="@id/photo"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@color/white_ish"
        android:textSize="20sp"
        android:layout_marginLeft="10dp"
        android:text="$1,165,000"/>


    <TextView
        android:id="@+id/tv_address"
        android:layout_toRightOf="@id/photo"
        android:layout_below="@id/tv_price"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="15sp"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="5dp"
        android:textColor="@color/white_ish"
        android:text="56-0562nd Ave Quens NY 1666 USA"/>

    <LinearLayout
        android:id="@+id/layout"
        android:layout_toRightOf="@id/photo"
        android:layout_alignParentBottom="true"

        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:layout_marginRight="5dp"
        android:layout_marginLeft="10dp"
        android:gravity="center_horizontal"
        android:orientation="horizontal">

        <TextView
            android:id="@+id/tv_total_bed"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:textColor="@color/white_ish"
            android:text="3"/>

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="5dp"
            android:layout_gravity="center_vertical"
            android:src="@drawable/bed_icon_white"/>


        <TextView
            android:id="@+id/tv_total_bath"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="15dp"
            android:layout_gravity="center_vertical"
            android:textColor="@color/white_ish"
            android:text="3"/>

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="5dp"
            android:layout_gravity="center_vertical"
            android:src="@drawable/bath_icon_white"/>


        <TextView
            android:id="@+id/tv_area_sqft"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="15dp"
            android:layout_gravity="center_vertical"
            android:textColor="@color/white_ish"
            android:text="2500 sqft"/>

        <net.steamcrafted.materialiconlib.MaterialIconView
            android:id="@+id/btn_like"
            android:layout_width="wrap_content"
            android:layout_height="fill_parent"
            app:materialIcon="heart_outline"
            app:materialIconColor="@color/white_ish"
            app:materialIconSize="32dp"
            android:layout_marginLeft="1dp"/>

    </LinearLayout>

</RelativeLayout>

[TWiStErRob]

That looks correct to hit the cache, what's "too much" for you?
Do you have a stable connection / fast server? That is: how fast do these images load in a browser on the same device?

which has image(120*120)

Does this mean 120x120px per image, or 120 by 120 grid of images each 300-400 kb? I'm guessing first, otherwise you hopefully wouldn't have reported this issue.

[adisofttech]

Here 120*120 in dp unit , original image size on my server is around 300-400 kb . I have checked Its loading fast in browser.

[TWiStErRob]

Ah I see the size now in the XML.
How big are those images in pixels?
How slow is "too much"?
Which one is slow: list or detail or both?
How many of the images are loading at once?

You can try .dontTransform() which disables the cropping, so it should speed up loads, but you'll pay the price on each render.

[adisofttech]

all images is not equal size its around 1280*800.
both detail and list slow taking around 5-10 sec each but i need it should loading within 2-3 sec.

[TWiStErRob]

How many of the images are loading at once?

[adisofttech]

4-5 at a time its showing in listview via adapter when we scroll down then load next

[TWiStErRob]

Double-check your ViewHolder pattern. Maybe there's a bug in it: if it doesn't recycle the views, then Glide will keep loading the old images. This means the any scrolled images will be queued up after the old ones complete.

[adisofttech]

its my view holder class

 class ViewHolder {
        public ImageView photo;
        public TextView tv_price,tv_address,tv_total_bed,tv_total_bath,tv_area_sqft;
        public MaterialIconView btn_like;
    }

below is adapter class getView Method

       @Override
        public View getView(int position, View convertView, ViewGroup parent) {

           final ViewHolder holder ;

            /*
             * The convertView argument is essentially a "ScrapView" as described is Lucas post
             * http://lucasr.org/2012/04/05/performance-tips-for-androids-listview/
             * It will have a non-null value when ListView is asking you recycle the row layout.
             * So, when convertView is not null, you should simply update its contents instead of inflating a new row layout.
             */
            if(convertView==null){
                // inflate the layout
                LayoutInflater inflater = ((Activity) ctx).getLayoutInflater();
                convertView = inflater.inflate(layoutResourceId, parent, false);
                holder = new ViewHolder();

                holder.photo=(ImageView)convertView.findViewById(R.id.photo);
                holder.tv_address=(TextView)convertView.findViewById(R.id.tv_address);
                holder.tv_total_bed=(TextView)convertView.findViewById(R.id.tv_total_bed);
                holder.tv_total_bath=(TextView)convertView.findViewById(R.id.tv_total_bath);
                holder.tv_area_sqft=(TextView)convertView.findViewById(R.id.tv_area_sqft);
                holder.tv_price=(TextView)convertView.findViewById(R.id.tv_price);
                holder.btn_like = (MaterialIconView)convertView.findViewById(R.id.btn_like);

                convertView.setTag(holder);

            }else {
                // View recycled !
                // no need to inflate
                // no need to findViews by id
                holder = (ViewHolder) convertView.getTag();
            }

            final SearchListItem item = list.get(position);

            holder.tv_price.setText("$ "+item.getPrice());
            holder.tv_area_sqft.setText(item.getArea_sqft()+" sqft");
            holder.tv_address.setText(item.getAddress());
            holder.tv_total_bath.setText(""+item.getBathsTotal());
            holder.tv_total_bed.setText(""+item.getBedsTotal());

            if(myFavouritePropertyListIds.contains(item.getListingsId())){
                holder.btn_like.setColor(ctx.getResources().getColor(R.color.toolbar));
                holder.btn_like.setIcon(MaterialDrawableBuilder.IconValue.HEART);
            }else{
                holder.btn_like.setColor(Color.WHITE);
                holder.btn_like.setIcon(MaterialDrawableBuilder.IconValue.HEART_OUTLINE);
            }


            Glide.with(ctx)
                    .load(item.getUrl())
                    .placeholder(R.drawable.defulthome)
                    .fitCenter()
                    .diskCacheStrategy(DiskCacheStrategy.ALL)
                    .error(R.drawable.defulthome)
                    .dontTransform()
                    .into(holder.photo);

                     return convertView;

        }

view is recycling here

[TWiStErRob]

Yeah that looks right. It looks like you'll need to figure this out by debugging yourself, here are some tools:

• https://github.com/bumptech/glide/wiki/Debugging-and-Error-Handling
• LoggingTarget and LoggingListener from my glide-support repo

You should enable all logging and add modify your Glide line with:

.listener(new LoggingListener("list"))
.into(new LoggingTarget<>(new GlideDrawableImageViewTarget(holder.photo)))

so you have a lot of data to work with and then analyze your logs where the delays happen.

Some unrelated things I noticed: defulthome should be defaulthome, and ""+item.* is better written as String.valueOf(item.*()) or Integer.toString(item.*())

[adisofttech]

Getting below log in case of delay

V/GLIDE: list.onException(null, http://rwimage.fnisrediv.com/ListingImages/idswrmls/images/0/0/98549795.jpg, LoggingTarget@3dc56af2, first)
V/LoggingTarget: [email protected](null,android.graphics.drawable.BitmapDrawable@35b6d0e4)

V/GLIDE: list.onException(null, http://rwimage.fnisrediv.com/ListingImages/idswrmls/images/0/0/98569599.jpg, LoggingTarget@19e510e2, first)
V/LoggingTarget: [email protected](null, android.graphics.drawable.BitmapDrawable@2c255966)

V/GLIDE: list.onException(null, http://rwimage.fnisrediv.com/ListingImages/idswrmls/images/0/0/98569599.jpg, LoggingTarget@23d50e8c, first)
V/LoggingTarget: [email protected](null, android.graphics.drawable.BitmapDrawable@380854a7)

V/GLIDE: list.onException(null, http://rwimage.fnisrediv.com/ListingImages/idswrmls/addl_picts/0/0/98587770-6.jpg, LoggingTarget@84eae7d, first)
V/LoggingTarget: [email protected](null, android.graphics.drawable.BitmapDrawable@3edb9b3)

list.onException(null, http://rwimage.fnisrediv.com/ListingImages/idswrmls/addl_picts/0/0/98587770-17.jpg, LoggingTarget@7552ec2, first)
 V/LoggingTarget: [email protected](null, android.graphics.drawable.BitmapDrawable@333f3fd4)

[TWiStErRob]

That doesn't look like delays, these loads failed and you got your error drawable (which is the same as your placeholder). By the way, to diagnose delays it helps to have some timestamps ;) Try logging just before calling Glide too to see how long it takes for each model to finish loading.

[kashif06]

The same thing is happening with me. I am using recyclerview to show images. Until recently when I was working on my local machine using wammp images were loading faster within few seconds but now I bought a shared server and now the images are taking more than 10 secs to load and this is just for a set of images.. I have even checked in my browser the images are loading up quickly. So it's not a problem of server speed I guess.

[TWiStErRob]

@kashif06 Glide's decode is only as fast as the InputStream that provides the data. Maybe your images are huge (megabytes). Any chance that the browser was on a wired desktop computer; or was it a Chrome on the same device that was slow? Remember that great-many apps on millions of devices are using Glide without a hickup.

@adisofttech I'm gonna close this, I assume you've solved it.

[kashif06]

My images are around 500-800 kb. And when I am added listener some images are not able to load properly and most of the images are showing in on resource that's fine but I don't know why some images are not able to load properly.

[kashif06]

Actually, I found out that the image view layout for Grid had wrap content for width and height both which consumes a lot of time for the actual image to set according to its actual size and in my case size of every image was different.I just changed that to match parent and the loading is faster now.

[yeahman45]

@adisofttech have you been able to find solution? loading images with glide is so slow compared to loading the same images in a browser on the same device

[TWiStErRob]

@yeahman45 something to consider: Chrome may be caching the image, so when you measure it, try it always on a different image Chrome has never seen before.