CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Ian Daz
Ian Daz

Reputation: 143

JQUERY Smooth Scrolling Large Images

We're building a one page website and something we have always had problems with is when the one page site has lots of images. The scroll seems very jittery especially on chrome and we want to look at a much better way of getting it done. Any suggestions of libraries of techniques to use?

Thanks in advance.

Upvotes: 0

Views: 661

Answers (1)

itcropper
itcropper

Reputation: 772

Since each image is likely getting resized with CSS, then with lots of images, the browser has to resize the image when you scroll, which adds a lot of computation.

This will add to the loading/rendering time initially, but should help with laggy scrolling.

$('.body').find('.img').each(function() {
    var img = this;
    setTimeout(function() { //use setTimeout so as to not totally block the thread.
        renderImageAsRightSize(img);
    }, 0);
});
//remove loader image.
$(".site-loader").delay(100).fadeOut("slow");

function renderImageAsRightSize (imageObject)
{    
   var canvas = document.createElement('canvas');
   var ctx = canvas.getContext('2d');

   canvas.height = canvas.width * (imageObject.height / imageObject.width);

   var oc   = document.createElement('canvas'),
       octx = oc.getContext('2d');

   oc.width = imageObject.width;
   oc.height = imageObject.height;
   octx.drawImage(imageObject, 0, 0, oc.width, oc.height);

   octx.drawImage(oc, 0, 0, oc.width, oc.height);

   //resize final image
   ctx.drawImage(oc, 0, 0, oc.width, oc.height, 0, 0, canvas.width, canvas.height);
}

Essentialliy, converting full-size images being resized with CSS, to the appropriate size (whatever the size of the resized image is on the page) using the canvas.

Upvotes: 1

Related Questions