hisrc icon indicating copy to clipboard operation
hisrc copied to clipboard

Fixed implementation of the speed test and improved screen quality detection

Open Seneral opened this issue 8 years ago • 0 comments

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 ();
		}
	});
});

Seneral avatar Feb 05 '17 15:02 Seneral