hisrc
hisrc copied to clipboard
Fixed implementation of the speed test and improved screen quality detection
Improved screen quality detection:
- Replaced zoom level as decision between image quality with actual resolution (SubHD, HD and Retina differenciation)
- Calculation of screen quality is now local and possibly different for each call to HiSrc allowing for different types of image loading
- Added parameters minHDSize (1080) and minRetinaSize (2560)
Fixed implementation of the speed test:
- SpeedTest is now performed globally by setting the complete event globally on $(document)
- SpeedTest can now actually explicitly be started before loading the DOM and explicitly ommitted in all other calls by setting the speedTestUri (if empty, no speed check is performed)
- all calls to HiSrc now use existing SpeedTest results or subscribe to the completed event to wait with their execution
Implemented second chance test:
- Added optional 'SecondChance' test performs the SpeedTest once more when failed on HD-capable devices
- Added parameter secondChance (false) to toggle this behaviour
- Goal is to eliminate wrong bandwidth detection on desktop PCs due to bandwidth fluctuations
- This will not affect mobile networks or devices not needing this
- It is only happening once at maximum during one cache expiration period
Other:
- Removed writing of fixed width and height values on images to prevent unexpected behaviour (said to fix some odd behaviour on Safari)
Example of usage that was previously impossible:
// Perform the first and only speed test of hiSrc
$.hisrc.speedTest ({
minKbpsForHighBandwidth: 200,
speedTestUri: "img/50K.jpg",
speedTestKB: 50,
speedTestExpireMinutes: 10,
secondChance: true, // Enable second chance for desktop
/*forcedBandwidth: 'high',*/ // Debug
});
$(document).ready (function ()
{
// Setup different variations of HiSrc, each only responsible for replacing
// Do not perform a speed test on their own
// Applies to banners (width:100%), which are available in 800, 1600 and 2400 horizontal sizes:
$("img.hisrc.bannerImage, hisrc.bannerImage img").hisrc({
speedTestUri: '', // Don't do another speed test
srcIsLowResolution: true,
// Set banner specific sizes
minHDSize: 1600,
minRetinaSize: 2400,
});
// Applies to all other images only having medium and high quality versions
$("img.hisrc, hisrc img").not(".bannerImg").hisrc({
speedTestUri: '', // Don't do another speed test
srcIsLowResolution: false,
// Set minimum screen size for high quality version
minRetinaSize: 1000,
});
// Screen size can increase, usually due to moving window to a higher-res second screen or changing orientation
var initialWidth = screen.width;
$(window).resize(function () {
if (screen.width > initialWidth)
{ // Reload higher quality content suitable for the new resolution, but only if it is needed
initialWidth = screen.width;
setupHiSrc ();
}
});
});