Skip to content

Conversation

@Seneral
Copy link

@Seneral Seneral commented Feb 5, 2017

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

Replaced zoom level as decision between image quality with actual resolution (SubHD, HD and Retina)
- 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
- all calls to hiSrc now use existing SpeedTest results or subscribe to the completed event to wait with their execution
- Added optional 'SecondChance' test performs the SpeedTest once more when failed on HD-capable devices
- Enable by setting secondChance parameter to true

- Goal is to eliminate wrong bandwidth detection on desktop PCs due to bandwidth fluctuation;
- This will not affect mobile networks or devices not needing this
- It is only happening once at maximum during one cache expiration period
Seneral pushed a commit to Seneral/seneral.github.io that referenced this pull request Feb 5, 2017
(and added 3rd party source scripts)

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)
Seneral added a commit to Seneral/seneral.github.io that referenced this pull request Sep 21, 2021
(and added 3rd party source scripts)

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)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant