How not to make delay while loading image?

Question

I am loading images from the server in a recyclerView and in parallel I am downloading that image too. What I actually want to do is that until image downloads until then show a blur or dark opaque preview of the image with progress bar on that.to load the image I am using glide and to download I am using Okhttp

To load the image into view:-

Glide.with(cont).load(modal.get(position).getMassege()).apply(requestOptions).listener(new RequestListener<Drawable>() {
                    @Override
                    public boolean onLoadFailed(@Nullable GlideException e, Object model, com.bumptech.glide.request.target.Target<Drawable> target, boolean isFirstResource) {
                        return false;
                    }

                    @Override
                    public boolean onResourceReady(Drawable resource, Object model, com.bumptech.glide.request.target.Target<Drawable> target, DataSource dataSource, boolean isFirstResource) {

                        if(modal.get(position).getProgressPercentage()==0) {
                            new Thread(new Runnable() {
                                @Override
                                public void run() {

                                    downloadFile(modal.get(position).getMassege(), position, modal.get(position).getMsgid(),modal.get(position).getTimeSent());

                                }
                            }).start();
                        }
                        return false;
                    }
                }).into(holder.image);

To download image

    public void downloadFile(String src, int position, String messageId,String timeStamp) {
    try {
        java.net.URL url = new java.net.URL(src);
        HttpURLConnection connection = (HttpURLConnection) url
                .openConnection();
        connection.setDoInput(true);
        connection.connect();
        int lenghtOfFile = connection.getContentLength();
        InputStream input = connection.getInputStream();
        String[] fileNam = src.split("/");
        OutputStream output = new FileOutputStream(cont.getFilesDir() + fileNam[fileNam.length - 1]);
        byte data[] = new byte[1024];

        long total = 0;
        int count = 0;
        int progressPercentage = 0;
        Intent intent = new Intent();
        intent.setAction(Constants.INTENT_FILTER);
        intent.putExtra(Constants.MESSAGE_POSITION_IN_CHAT_LIST, position);
        intent.putExtra(Constants.DOWNLOADING_FILE, true);

        while ((count = input.read(data)) != -1) {
            total += count;
            // publishing the progress....
            // After this onProgressUpdate will be called
            progressPercentage = (int) ((total * 100) / lenghtOfFile);
            if(progressPercentage==30||progressPercentage==60||progressPercentage==100) {
                intent.putExtra(Constants.PROGRESS, progressPercentage);
                intent.putExtra(Constants.FILE_PATH, cont.getFilesDir() + fileNam[fileNam.length - 1]);
                intent.putExtra(Constants.MESSAGE_ID, messageId);
                cont.sendBroadcast(intent);
            }

            // writing data to file
            output.write(data, 0, count);
            Log.d("Downloding" + progressPercentage, "Count" + count);
            if (progressPercentage > 99) {
                DatabaseHelperChattingToUsers databaseHelperChattingToUsers = new DatabaseHelperChattingToUsers(cont);
                String userId = databaseHelperChattingToUsers.getUserExists(sendTo);
                String splits[] = userId.split("/");
                databaseHelperChattingToUsers.updateContact(new ChattingToUsers(splits[0], sendTo, timeStamp, cont.getFilesDir() + fileNam[fileNam.length - 1],"0"));

                DatabaseHelper1 db = new DatabaseHelper1(cont);
                db.updateContact(messageId, "", "", "", 100);
                String filePath = intent.getStringExtra(Constants.FILE_PATH);
                db.updateChatMessage(messageId, filePath);
            }
        }

    } catch (IOException e) {
        e.printStackTrace();

    }
}

Where I have reached:

I am able to download the image in parallel while loading image in recyclerView along with progress bar showing image download with blur preview of image.

Problem I am facing:

Image takes small time while loading in recyclerView for the blur preview of image but item view is added in the recyclerView and image loads in that after sometime

but on the first time it will still take time @Ümañgßürmån — b.k sarika
Check out Glide.Thumnail() bumptech.github.io/glide/doc/options.html#thumbnail-requests — Leonardo Velozo

Nilesh Deokar Nilesh Deokar · Accepted Answer · 2018-12-13T07:15:17

Glide would download image for you, why are you taking extra efforts by downloading it via okHttp ?

There will be always delay in downloading a complete image. It depends on your network speed and image size.

To reduce a delay you can have different sizes of images stored on server. On client side download small size image first and display it in recyclerview. ( Smaller image size == less time to download.)

Upon clicking row in recyclerview download the complete image by hitting another urls.

e.g.

https://www.example.com/images/small/image1.png ( 250x250 px = 100kb )

https://www.example.com/images/medium/image1.png ( 1000x1000 px = 400kb )

https://www.example.com/images/large/image1.png (3000x3000 ox = 1200kb)

How not to make delay while loading image?

1 Answers