Multiple image sizes vs browser image resizing / scaling

I have a page where I will be loading a couple of different sizes of the main image; although not all the large images will be loaded at once. The scenario is this.. I have a slider which contains the thumbs for all the larger images; these all load when the page does. The default large image loads when the page does, but the other large images only load if the user clicks on the thumbnail for that image and then I replace the src of the large image as so.. function changeMainImage(image) { // Set big image var big_image = image + '-big.png' // Update main image url jQuery('#main_image').attr('src', big_image); } Now because the large images don't load when the page does, this causes a small delay for the large image to show, which is rather undesirable. Now I'm thinking that I could kill two birds with one stone with just loading the large image and no thumbs and just have the browser scale the large image into a thumbnail; I just kinda cringe at doing it this way as I have always hated sites that use this method for thumbs, but in my case it seems valid as I need to load the large image anyway. This would allow me to reduce the number of http requests by `1 * amount of pics` and also give me instant load of the large images once the thumb is clicked. My only concerns are trying to figure out how to give the browser the correct dimensions so that the image scales to the correct proportions and also the fact that if the page has say 12 images; this way I am making the user download all 12 large images at once when they make not even be interested in looking at all 12. Both versions have pros & cons - any advice what to do here?

以上就是Multiple image sizes vs browser image resizing / scaling的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » JavaScript 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准