1
\$\begingroup\$

I am working on a web project and am trying to create a way to detect when an image is in viewpoint of the browser window then load/show the image. Since there are some rather large image that are being resize to use a thumbnails, I am trying to take into consideration those that might view it one a mobile device and reduce page loading time. I notice that many site with galleries are doing the same thing.

I create a little script using JavaScript to detect when an <img /> tag is in view and then take its data attribute value (the URL of the image) and set it's <img src=""/> attribute to it.

Is this is an efficient way of doing it or should I just use PHP the create thumbnails?

I have included snippets of the HTML and JavaScript I am using.

HTML of the image

<img data-image-src="images/c9c191f226c643eabcce6debfe76049d.png" src="" alt="A nify Image" />

JavaScript with jQuery

//Show images when in viewpoint
$(window).on('scroll load',function(){
    //Window width & height
    var viewpointWidth = $(window).width(),
    viewpointHeight = $(window).height(),
    //Document Top pos & Left pos
    documentScrollTop = $(document).scrollTop(),
    documentScrollLeft = $(document).scrollLeft(),
    //Document Positions
    minTop = documentScrollTop,
    maxTop = documentScrollTop + viewpointHeight,
    minLeft = documentScrollLeft,
    maxLeft = documentScrollLeft + viewpointWidth;
    //Loop for each image
    $('.page-content img').each(function(){
        $eleImage = $(this),
        elementOffset = $eleImage.offset();       
        if((elementOffset.top > minTop && elementOffset.top < maxTop) && (elementOffset.left > minLeft &&elementOffset.left < maxLeft)) {
            $(this).attr('src',$(this).data('image-src'));
        }
    });
});
\$\endgroup\$
2
  • \$\begingroup\$ A point (an img) may enter the viewport through window resize, so you would have to handle those events also. \$\endgroup\$
    – abuzittin gillifirca
    Commented Oct 1, 2014 at 9:42
  • \$\begingroup\$ Thank you, should I add the onresize even to jQuery's .on() even handler like so $(window).on('scroll load resize',function(){...} or go about it a different way? \$\endgroup\$
    – andrewnite
    Commented Oct 1, 2014 at 22:07

1 Answer 1

Reset to default
1
\$\begingroup\$

Correctness

  • You need to handle resize events also. Yes, you can add it like : $(window).on('scroll load resize', ...

  • You are only checking for the visibility of the top/left corner, if you load a large image, scroll right, and then scroll down, you will see the right edges of the ALT text of the images, but because their top/left corner is not in viewport, those images will not load. You might want to check if any point of the img box is visible.

Browser Behavior

  • Make sure you have <!DOCTYPE HTML> on your document, this will load all images if you miss doctype declaration. (for Firefox, Chrome, don't know about others)

  • You might want to mark images processed, by adding a class or another data; and do not fiddle with the src attributes of the images once they are loaded.

Javascript related

  • Because you miss a var before $eleImage and elementOffset, they pollute global namespace.

  • You copy the value of $(this) here : $eleImage = $(this), but you keep using $(this) below.

\$\endgroup\$
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.