படங்கள் புதிய தாவலில் திறக்கும்போது அவற்றின் நடத்தையை எவ்வாறு சரிசெய்வது

மறுஅளவிடப்பட்ட படங்களை தாவல்கள் முழுவதும் தடையின்றி வேலை செய்யும்

உங்களுக்குப் பிடித்த இணையதளத்தை உலாவுவதை கற்பனை செய்து, புதிய தாவலில் திறக்க படத்தின் மீது வலது கிளிக் செய்யவும். இது ஒரு எளிய, உள்ளுணர்வு நடவடிக்கையாகும், இது நம்மில் பெரும்பாலோர் ஒரு பொருட்டல்ல. ஆனால் நீங்கள் ஒரு டெவலப்பராக இருந்தால், பயனர் திரைகளின் அடிப்படையில் படங்களை மறுஅளவிடுவதன் மூலம் உங்கள் இணையதளத்தை மேம்படுத்த முயற்சிப்பீர்கள், மேலும் இயல்புநிலை "புதிய தாவலில் திற" நடத்தை எதிர்பார்த்தபடி செயல்படவில்லை என்றால் என்ன செய்வது? 🤔

இந்த காட்சி வெறுப்பாக இருக்கலாம். சிறிய திரைகள் அல்லது குறைந்த அலைவரிசைக்கு மறுஅளவிடப்பட்ட படத்தை உட்பொதித்துள்ளீர்கள், புதிய தாவலில் திறக்கும் போது, ​​மறுஅளவிடப்பட்ட பதிப்பு சரியாக ஏற்றப்படாமல் இருப்பதைக் கண்டறியலாம். இது பயனர்களை குழப்பமடையச் செய்து, நீங்கள் வழங்க விரும்பும் தடையற்ற அனுபவத்தை சீர்குலைக்கும்.

HTML மற்றும் இணைய மேம்படுத்தல்களுடன் டிங்கரிங் செய்வதை விரும்பும் ஒருவராக, மீடியா-கனமான போர்ட்ஃபோலியோ பக்கத்தை உருவாக்கும் போது நான் இந்த சிக்கலில் சிக்கினேன். நான் அலைவரிசையைச் சேமிக்க சிறிய படக் கோப்புகளை வழங்க வேண்டும், ஆனால் "புதிய தாவலில் திற" செயல்பாட்டின் நெகிழ்வுத்தன்மையை பராமரிக்க வேண்டும். ஆயினும்கூட, விஷயங்கள் திட்டமிட்டபடி நடக்கவில்லை, சாத்தியமான தீர்வுகளில் ஆழமாக மூழ்குவதற்கு என்னை கட்டாயப்படுத்தியது.

இந்த கட்டுரையில், இது ஏன் நிகழ்கிறது மற்றும் அதைத் தீர்க்க நீங்கள் என்ன நடவடிக்கைகள் எடுக்கலாம் என்பதை நாங்கள் ஆராய்வோம். நீங்கள் ஒரு வலை வடிவமைப்பாளராக இருந்தாலும் அல்லது ஆர்வமுள்ள டெவலப்பராக இருந்தாலும் சரி, உங்கள் மறுஅளவிடப்பட்ட படங்கள் நீங்கள் விரும்பும் விதத்தில் செயல்படுவதை எவ்வாறு உறுதிப்படுத்துவது என்பதை நீங்கள் கற்றுக் கொள்வீர்கள். 🚀

தாவல்கள் மற்றும் திரைகள் முழுவதும் பட நடத்தையை தனிப்பயனாக்குதல்

மறுஅளவிடப்பட்ட பட URLகள் பயன்படுத்தப்படும்போது, ​​"புதிய தாவலில் படத்தைத் திற" செயல்பாட்டை மேலெழுதுவதில் உள்ள சிக்கலைத் தீர்ப்பதே மேலே உள்ள ஸ்கிரிப்ட்களின் நோக்கமாகும். முதல் ஸ்கிரிப்ட், ஒரு முன்-இறுதி தீர்வு, படங்களில் வலது கிளிக்களை மாறும் வகையில் கண்டறிய ஜாவாஸ்கிரிப்டை நம்பியுள்ளது. இது பயன்படுத்துகிறது querySelectorAll பக்கத்தில் உள்ள அனைத்து படங்களையும் தேர்ந்தெடுத்து தனிப்பயன் இணைக்கும் முறை சூழல்மெனு நிகழ்வு கேட்பவர். இந்த கேட்பவர் இயல்புநிலை நடத்தையை இடைமறித்து, படத்திற்கான மறுஅளவிடப்பட்ட URL ஐ உருவாக்கி, அதை புதிய தாவலில் திறக்கிறார். உங்கள் இணையதளத்தில் உள்ள படங்களுடன் தொடர்பு கொள்ளும் பயனர்களுக்கு இந்த தீர்வு தடையின்றி வேலை செய்கிறது, வெவ்வேறு திரை அளவுகளில் நிலையான அனுபவத்தை உறுதி செய்கிறது. 🔄

இரண்டாவது ஸ்கிரிப்ட் Node.js மற்றும் Express ஐப் பயன்படுத்தி பின்-இறுதி அணுகுமுறையை எடுக்கிறது. இந்த முறை பயனர்கள் கோரும்போது பட URLகளை மாறும் வகையில் மீண்டும் எழுதுகிறது. மிடில்வேர் ஒவ்வொரு படக் கோரிக்கையையும் செயலாக்குகிறது மற்றும் பயனரை மறுஅளவிடப்பட்ட பதிப்பிற்குத் திருப்பிவிடுவதற்கு முன், URL இல் தேவையான பின்னொட்டைச் சேர்க்கிறது. அதிக ட்ராஃபிக் இணையதளங்களுக்கு சேவை செய்யும் போது இந்த அணுகுமுறை மிகவும் பயனுள்ளதாக இருக்கும், ஏனெனில் இது சர்வரில் மறுஅளவிடல் தர்க்கத்தை மையப்படுத்துகிறது. உதாரணமாக, ஒரு பயனர் வருகை தந்தால் https://imgur.com/K592dul.jpg, சர்வர் தானாகவே அவற்றை மறுஅளவிடப்பட்ட பதிப்பிற்கு திருப்பிவிடும் https://imgur.com/K592dulm.jpg. இந்தப் படிநிலையை மேம்படுத்துவதன் மூலம், இணையதளங்கள் அலைவரிசை பயன்பாட்டை கணிசமாகக் குறைக்கலாம் மற்றும் செயல்திறனை மேம்படுத்தலாம்.

இந்த இரண்டு தீர்வுகளுக்கும் கூடுதலாக, மூன்றாவது ஸ்கிரிப்ட் பைத்தானில் யூனிட் சோதனையை ஒருங்கிணைக்கிறது அலகு சோதனை கட்டமைப்பு. வினவல் சரங்களைக் கொண்ட நிலையான URLகள் மற்றும் URLகள் போன்ற வெவ்வேறு நிகழ்வுகளைக் கையாளுவதை உறுதிசெய்ய, URL மறுஅளவிடல் தர்க்கத்தை ஸ்கிரிப்ட் சோதிக்கிறது. மறுஅளவிடல் தர்க்கம் நம்பகமானது மற்றும் பல்வேறு சூழ்நிலைகளில் எதிர்பார்த்தபடி செயல்படுவதை இது உறுதி செய்கிறது. உதாரணமாக, சோதனையின் போது, ​​செயல்பாடு சரியாக மாறுகிறது என்பதை நாங்கள் சரிபார்க்கிறோம் https://imgur.com/K592dul.jpg செய்ய https://imgur.com/K592dulm.jpg. இந்தச் சோதனைகளைச் சேர்ப்பதன் மூலம், டெவலப்பர்கள், எட்ஜ் கேஸ்கள் மூடப்பட்டிருப்பதை அறிந்து, தங்கள் தீர்வுகளை நம்பிக்கையுடன் பயன்படுத்த முடியும். 🚀

ஒட்டுமொத்தமாக, இந்த ஸ்கிரிப்டுகள் புதிய தாவல்களில் படங்கள் எவ்வாறு வழங்கப்படுகின்றன மற்றும் திறக்கப்படுகின்றன என்பதைத் தனிப்பயனாக்க வலுவான தீர்வுகளை வழங்குகின்றன. நேரடி தொடர்புக்கு JavaScript அடிப்படையிலான முன்-இறுதி அணுகுமுறையையோ அல்லது மையப்படுத்தப்பட்ட கட்டுப்பாட்டுக்கான Node.js பின்-இறுதி அணுகுமுறையையோ நீங்கள் தேர்வுசெய்தாலும், உகந்த பயனர் அனுபவத்தை உறுதிசெய்வீர்கள். சோதனையானது இந்த முறைகளின் நம்பகத்தன்மையை மேலும் வலுப்படுத்துகிறது, சிறிய அளவிலான திட்டங்கள் மற்றும் பெரிய, டைனமிக் இணையதளங்கள் இரண்டிற்கும் ஏற்றதாக அமைகிறது. இந்த உத்திகள் மூலம், உங்கள் பயனர்களுக்கு தடையற்ற மற்றும் பார்வைக்கு ஈர்க்கும் அனுபவத்தை உறுதிசெய்து, செயல்பாட்டைப் பராமரிக்கும் போது படத்தை ஏற்றுவதை நீங்கள் திறமையாக நிர்வகிக்கலாம். 🌟

// Step 1: Select all image elementsdocument.querySelectorAll('img').forEach(img => {    // Step 2: Add a 'contextmenu' event listener to override right-click    img.addEventListener('contextmenu', event => {        event.preventDefault(); // Disable default behavior        const resizedSrc = generateResizedSrc(img.src); // Custom function to generate the resized URL        // Step 3: Open the resized image in a new tab        window.open(resizedSrc, '_blank');    });});// Utility: Function to append 'm' for resized versionsfunction generateResizedSrc(src) {    const parts = src.split('.');    parts[parts.length - 2] += 'm'; // Append 'm' before file extension    return parts.join('.');}

// Required modulesconst express = require('express');const app = express();// Middleware to rewrite image URLsapp.use((req, res, next) => {    if (req.path.includes('/images/')) {        const originalUrl = req.path;        const resizedUrl = originalUrl.replace(/(\.\w+)$/, 'm$1'); // Append 'm' for resized images        res.redirect(resizedUrl);    } else {        next();    }});// Sample routeapp.get('/images/*', (req, res) => {    res.send('Image loaded with resized URL');});// Start serverapp.listen(3000, () => console.log('Server running on port 3000'));

import unittest# Function to testdef generate_resized_url(url):    parts = url.split('.') # Split by dot    parts[-2] += 'm' # Append 'm' before extension    return '.'.join(parts)# Test casesclass TestResizedUrlGeneration(unittest.TestCase):    def test_standard_url(self):        self.assertEqual(generate_resized_url('https://imgur.com/K592dul.jpg'), 'https://imgur.com/K592dulm.jpg')    def test_url_with_query(self):        self.assertEqual(generate_resized_url('https://example.com/image.png?size=large'), 'https://example.com/imagem.png?size=large')if __name__ == '__main__':    unittest.main()

தாவல்கள் மற்றும் சாதனங்கள் முழுவதும் பட நடத்தையை மேம்படுத்துதல்

நவீன வலை மேம்பாட்டின் ஒரு முக்கியமான அம்சம் பயனர் அனுபவத்தை தியாகம் செய்யாமல் செயல்திறனுக்காக படங்கள் உகந்ததாக இருப்பதை உறுதி செய்வதாகும். குறிப்பாக "புதிய தாவலில் படத்தை திற" விருப்பத்தை அடிக்கடி பயன்படுத்தும் பயனர்களுக்கு, மறுஅளவிடப்பட்ட படங்களை மாறும் வகையில் வழங்க முயற்சிக்கும்போது ஒரு பொதுவான சவால் எழுகிறது. ஒரு வலைப்பக்கத்தில் மறுஅளவிடப்பட்ட படங்களை உட்பொதிப்பது அலைவரிசையைச் சேமிக்கும் அதே வேளையில், டெவலப்பர்கள் நிலைத்தன்மையைப் பராமரிக்க இந்த வலது கிளிக் செயல்பாட்டைக் கணக்கிட வேண்டும். இது காட்சி படத்தை மாற்றியமைப்பது மட்டுமல்லாமல், படம் நேரடியாக ஒரு புதிய தாவலில் திறக்கப்படும்போது நடத்தையை நிர்வகிப்பதும் அடங்கும். ⚡

ஒரு சாத்தியமான தீர்வு இணைப்பதில் உள்ளது முன்-இறுதி தர்க்கம் பின்-இறுதி ஆதரவுடன். முன்-இறுதியில், திரைத் தீர்மானம் அல்லது பயனர் தொடர்புகளின் அடிப்படையில் பட மூலத்தை ஸ்கிரிப்ட்கள் மாறும் வகையில் மாற்றும். எடுத்துக்காட்டாக, சூழல் மெனுவின் நடத்தையை மாற்றியமைக்கும் நிகழ்வு கேட்பவரை நீங்கள் சேர்க்கலாம். பின்-இறுதியில், Node.js போன்ற கட்டமைப்புகள் படக் கோரிக்கைகளை இடைமறித்து பயனரின் சாதனத்தைப் பொறுத்து மறுஅளவிடப்பட்ட படங்களை வழங்க முடியும். இந்த இரட்டை அணுகுமுறை உட்பொதிக்கப்பட்ட படங்கள் மற்றும் நேரடியாக அணுகப்பட்ட படங்கள் செயல்திறன் மற்றும் பயன்பாட்டிற்கு உகந்ததாக இருப்பதை உறுதி செய்கிறது.

பயனர் எதிர்பார்ப்புகளை நிவர்த்தி செய்ய, சோதனையும் இன்றியமையாதது. உயர் தெளிவுத்திறன் கொண்ட புகைப்படங்களைக் காண்பிக்கும் ஒரு போர்ட்ஃபோலியோ வலைத்தளத்தை கற்பனை செய்து பாருங்கள். மொபைல் சாதனங்களில் உள்ள பயனர்கள் சிறிய பட பதிப்புகளிலிருந்து பயனடைவார்கள், அதே நேரத்தில் டெஸ்க்டாப் பயனர்கள் முழு அளவிலான படங்களை விரும்பலாம். மறுஅளவிடல் தர்க்கத்தை செயல்படுத்துவதன் மூலமும், பல்வேறு காட்சிகளை முழுமையாகச் சோதிப்பதன் மூலமும், நீங்கள் சாதனங்கள் முழுவதும் தடையற்ற அனுபவத்தை வழங்கலாம். கூடுதலாக, சோம்பேறி-ஏற்றுதல் அல்லது WebP வடிவங்கள் போன்ற மாற்று அணுகுமுறைகள் உட்பட, பயனர் தொடர்புகளை மென்மையாகவும் உள்ளுணர்வுடனும் வைத்திருக்கும் போது செயல்திறனை மேலும் மேம்படுத்தலாம். 🌟