Cancel ajax request before moving to new page

[kcdipesh]

Hi I've been using your pjax library and I'm very happy with it. However, I am not able to handle one issue that I'm getting. It is like this: Page 1: Home Page 2: Image Listing Page Page 3: Image detail Page

When a user navigates to Page 2 from page 1, it loads a lots of thumbnail images through lazy-loading (xhr). By lots I mean more than 100. Before all the thumbnail are loaded if the user clicks on any of the image and navigates to Page 3 (image detail page), I've noticed that the browser waits to load all the pending images on page 2 before loading the image in page 3. This has caused a lot of waiting time for image in page 3 to appear (> 5 second)

I could not figure out a way to cancel the pending xhr request while switching page. Is there any built in feature in the library for this purpose?

Thanks in advanced.

[falsandtru]

Hi I'm not sure about your expected-actual scenario. Can you provide it? If you want to cancel your image request by yourself, pjax provides some event and hook point for canceling such as pjax:fetch.

[kcdipesh]

Thank you for the reply. I understood your point about the event pjax:fetch but is there any way to cancel the ongoing xhr request and images loadings that are already initiated?

[falsandtru]

How do you request images using xhr? I don't know about the relation of pjax and your image request.

[kcdipesh]

Maybe I'm heading in the wrong direction. This is my real problem. I'm using pjax with a lazy loading (https://github.com/verlok/lazyload) When someone hits Page 2, the browser starts loading the images (maybe the next 20 or 30). Whenever someone clicks on an image, the expected behaviour is to load the elements of the new page (ie Page 3 and its containing elements ,ie the image ) and abort the ongoing browser requests to the image of the earlier page (which are no more visible in the new page).

But the actual scenerio here is it waits for the 20 images in page 2 be loaded and then only the image of page 3 is loaded.

I was actually looking for ways to abort the image loading of the previous page (page 2) and just load the image of the page 3 once page 3 has been fetched.

[falsandtru]

page2 images: You need to manage other xhr requests yourself. Its management is not scope of pjax. However, your specified lazyload library does not seem to use the xhr request. Another, probably this is content caching or image size(optimization) problem. In general, this problem should resolve by caching and optimization of images. You don't have to cancel image requests.

page3 images: no problem?

[kcdipesh]

It was not exactly image optimization and caching problem. Here is a more detailed description of the scenario.

Lets suppose we are not using pjax(Normal page reload) When we go to page 2 (a page with a lots of image) browser starts loading the images. Assuming lazy loading is implemented, the image requests are initiated only after they are visible. Lets suppose that the browser starts loading the next N images as we scroll down.This means the browser keeps these N images in the loading queue ). Now, when some one immediately clicks on the image, the browser stops the current page and loads the next page. This means all the N images that were in the loading queue, are cleared.

However in my case where pjax is used to transition from page 2 to page 3, there is no full page reload hence, the N images in the loading queue are not cleared automatically by the browser. This caused the new image in page 3 to be loaded only after loading the first N images from page 2.

I think the good solution would be to abort all the async requests from previous page once we transition to new page using ajax. In this case I didn't figure out the best way to abort the image requests that are already in progress.

What I've tried is to simulate browse stop event in the pjax_fetch event in page 2 and seem to solve the problem.

pjax_fetch: function(){
                //cancel image downloads
                if(window.stop !== undefined)
                {
                     window.stop();
                }
                else if(document.execCommand !== undefined)
                {
                     document.execCommand("Stop", false);
                }

            }

Please suggest you think there is a better suggestion. Thanks

[falsandtru]

This problem is not scope of pjax. You need to distinguish the target element yourself.