发表新帖
发表新帖

How do I abort image

前端 未结
关注
7 2053
盖世英雄少女心
盖世英雄少女心 2020-11-29 01:23

I have a very long page that dynamically loads images as users scroll through.

However, if a user quickly scrolls away from a certain part of the page, I don\'t want

相关标签:
7条回答
  • 佛祖请我去吃肉
    2020-11-29 01:55

    You can load your images using ajax calls, and in case that the uses scrolls-out, you can abort the calls.
    In jQuery pseudo-code it would be something like that (forgive me mistakes in syntax, it is just an example):

    1) tag images that you want to load

    $(".image").each( function(){
    if ( is_in_visible_area(this) ) { // check [1] for example
        $(this).addClass("load_me");
    } else {
        $(this).addClass("dont_load");
    }
});

    2) load images

    ajax_requests = {};

$(".image.load_me").each( function(){
    // load image
    var a = $.ajax({
        url: 'give_me_photos.php',
        data: {img: photo_id},
        success: function(html){
            photo_by_id(photo_id), img.append(html);
        }
    });
    ajax_requests[photo_id] = a;

});

    3) cancel loading those out of the screen

    for( id in ajax_requests ) {
    if ( ! is_in_visible_area(id) ) {
        ajax_requests[id].abort();
    }
}

    Of course, add also some checking if the image is already loaded (e.g. class "loaded")

    [1]. Check if element is visible after scrolling

    [2]. Abort Ajax requests using jQuery

    0 讨论(0)
  • 长发绾君心
    2020-11-29 01:55

    Maybe you could serve the image through a php script which would check a field in the the db (or better yet a memcached) that would indicate stop loading. the script would portion up the image into chunks and pause in between each chunk and check if the stop flag for the particular request is. If it is set you send the header with A 204 no content which as soon as the browser gets it will stop receiving.

    This may be a bit over kill though.

    0 讨论(0)
  • 忘了有多久
    2020-11-29 02:02

    Well, my idea:

    1) initiate an AJAX request for the image, if it succeeds, the image goes to the browser cache, and once you set the 'src' attribute, the image is shown from the cache

    2) you can abort the XHR

    I wrote a tiny server with express emulating the huge image download (it actually just waits 20 seconds, then returns an image). Then I have this in my HTML:

    <!DOCTYPE html>
<html>
    <head>
        <style>
            img {
                width: 469px;
                height: 428px;
                background-color: #CCC;
                border: 1px solid #999;
            }
        </style>
    </head>

    <body>
        <img data-src="./img" src="" />
        <br />
        <a id="cancel" href="javascript:void(0)">CANCEL</a>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
        <script>
            $(function () {
                var xhr, img = $('img'), src = img.data('src');

                xhr = $.ajax(src, {
                    success: function (data) { img.attr('src', src) }
                });

                $('#cancel').click(function (){
                    xhr.abort();
                })
            });
        </script>
    </body>
</html>
    0 讨论(0)
  • 北恋
    2020-11-29 02:03

    BTW, another idea that might work:

    1) create a new iframe

    2) inside of the iframe have the script that starts loading the image, and once it's loaded, call the .parent's method

    3) when in need, stop the iframe content loading using .stop on the iframe object

    0 讨论(0)
  • 太阳男子
    2020-11-29 02:10

    What you are trying to do is the wrong approach, as mentioned by nrabinowitz. You can't just "cancel" the loading process of an image (setting the src attribute to an empty string is not a good idea). In fact, even if you could, doing so would only make things worst, as your server would continually send data that would get cancelled, increasing it's load factor and slow it down. Also, consider this:

    1. if your user scroll frenetically up and down the page, he/she will expect some loading delays.
    2. having a timeout delay (ex: 200 ms) before starting to load a portion of the page is pretty acceptable, and how many times will one stop and jump after 200 ms interval on your page? Even it it happens, it comes back to point 1
    3. how big are your images? Even a slow server can serve about a few tens of 3Kb thunbnails per second. If your site has bigger images, consider using low and hi resolution images with some components like lightBox

    Often, computer problems are simply design problems.

    ** EDIT **

    Here's an idea :

    1. your page should display DIV containers with the width and height of the expected image size (use CSS to style). Inside of each DIV, add an link. For example :

      <div class="img-wrapper thumbnail">
   <a href="http://www.domain.com/path/to/image">Loading...</a>
</div>

    2. Add this Javascript (untested, the idea is self describing)

      $(function() {

var imgStack;
var loadTimeout;

$(window).scroll(function() {
   imgStack = null;
   if (loadTimeout) clearTimeout(loadTimeout);

   loadTimeout = setTimeout(function() {

      // get all links visible in the view port
      // should be an array or jQuery object
      imgStack = ...

      loadNextImage();
   }, 200);                // 200 ms delay
});

function loadNextImage() {
   if (imgStack && imgStack.length) {
      var nextLink = $(imgStack.pop());   // get next image element

      $('<img />').attr('src', nextLink.attr('href'))
        .appendTo(nextLink.parent())
        .load(function() {
           loadNextImage();
        });

      // remove link from container (so we don't precess it twice)
      nextLink.remove();
   }
};

});
    0 讨论(0)
  • 眼角桃花
    2020-11-29 02:10

    The solution could be a webworker. a webworker can be terminated and with him the connection. But there is a small problem that the webworker uses the limited connections of the browser so the application will be blocked.

    Right now I'm working on a solution with serviceWorkers - they don't have a connection limit (I hope so)

    0 讨论(0)
 看不清?
提交回复
热议问题