تحديث مسار src لصورة باستخدام JavaScript/JQuery

لتغيير مسار src لصورة في عنصر img باستخدام JavaScript أو jQuery، يمكنك استخدام الطرق التالية:

استخدام JavaScript:

javascriptCopy code
document.querySelector('.phone').src = '../img/template/iphone4.png';

هذا الكود يستخدم querySelector للعثور على العنصر الذي يحمل الفئة .phone ويقوم بتغيير مسار src إلى ../img/template/iphone4.png.

استخدام jQuery:

javascriptCopy code
$('.phone').attr('src', '../img/template/iphone4.png');

هذا الكود يستخدم jQuery لتحديد العنصر الذي يحمل الفئة .phone ويستخدم attr لتعيين قيمة src الجديدة.

تأكد من أن المسار الجديد ../img/template/iphone4.png صحيح ويؤدي إلى الملف الصحيح.

يرجى ملاحظة أنه يجب تنفيذ هذا الكود بعد تحميل الصفحة بالكامل أو عندما تكون العناصر جاهزة للتفاعل.

بالطبع! إضافةً إلى تغيير مسار src لصورة باستخدام JavaScript أو jQuery، يمكنك أيضًا القيام ببعض العمليات الإضافية. على سبيل المثال، يمكنك تحميل الصورة الجديدة قبل تبديل المسار src لتجنب أي فجوة في عرض الصورة. يمكنك استخدام حدث load لتنفيذ العملية بعد تحميل الصورة الجديدة بنجاح. إليك كيف يمكنك القيام بذلك:

استخدام JavaScript:

javascriptCopy code
var newImage = new Image();
newImage.onload = function() {
    document.querySelector('.phone').src = newImage.src;
};
newImage.src = '../img/template/iphone4.png';

هذا الكود ينشئ صورة جديدة newImage ويحدد دالة onload التي ستُشغَّل عندما تحمل الصورة بنجاح. بعد ذلك، يتم تعيين مسار src الجديد لعنصر img الموجود بالفعل في الصفحة.

استخدام jQuery:

javascriptCopy code
var newImage = $('');
newImage.on('load', function() {
    $('.phone').replaceWith(newImage);
});
newImage.attr('src', '../img/template/iphone4.png');

هذا الكود ينشئ عنصر img جديدًا newImage باستخدام jQuery، ويحدد حدث load لتنفيذ العملية بعد تحميل الصورة بنجاح. بعد ذلك، يتم استبدال العنصر img القديم بالعنصر img الجديد في الصفحة.