2

كيف يتم جلب جميع الصور بشفرة JavaScript

السلام عليكم ورحمة الله،

أنا أريد شفرة JavaScript تدمج مثلا مع تطبيق Greasemonkey، حيث تسمح بجلب وإظهار (Load all images at once) جميع الصور في الصفحة.

المشكل هو أن الموقع الذي أزوره يستعمل تقنية Lazy Loading التي تجلب الصور تفاعليا مع المستخدم (كلما نزلنا إلى أسفل الصفحة مثلا يتم جلب صور جديدة، و هكذا دواليك). وبالتالي تفاعل الزائر يصبح ضروريا، وهذا ما لا أريده.

كما قلت سابقا، ما أريده هو شفرة JS تقوم بجلب جميع الصور دفعة واحدة، دون انتظار تفاعل من المستخدم.

الصفحة التالية كمثال:

شكرا جزيلا.

يرجى الدخول لحسابك أو تسجيل حساب لتستطيع إضافة تعليق
حساب جديد دخول

التعليقات

1
Voker أضف ردا

إليك شفرتي بناء على ما قلت... إن كان هذا قصدك.

var imgs = $('img');
for (i = 0; i < imgs.length; i++) {
console.log(imgs[i].src);
}

الشفرة تعمل ب jQuery، و هي تأخد الصور و الروابط من ال DOM إذ أن ال Lazy loading لا يؤثر عليها، إن كان سؤالك غير هذا فأخبرني.

0
عبد الله عبد الرحمن أضف ردا

شكرا جزيلا.

لكن هذه الشفرة لم تقدم المطلوب.

هناك صور في الصفحة التي أزورها، لا يتم تحميلها (Load) سوى بعد إنزال الصفحة والوصول إليها.

مثلا، يوجد إطار تحمل فيه صور، وتنتظر أخرى تفاعلا من المستخدم.

هاتين الشفرتين من الصفحة مثلا تبينان الفرق بين الصور المحملة تلقائيا، و الأخرى المنتظرة:

0
عبد الله عبد الرحمن أضف ردا 
<a class="photoset-link" data-fancybox-group="photoset-gallery-SZDBYCCII7RIYKB" href="/file/FAYGOXQII96WU7T/" data-fancybox-href="

http://cdn.instructables.co... ">

0
عبد الله عبد الرحمن أضف ردا 
<a class="photoset-link" data-fancybox-group="photoset-gallery-SZDBYCCII7RIYKB" href="/file/F774V10II96WU6E/" data-fancybox-href="

http://cdn.instructables.co... ">

0
Voker أضف ردا

بالنسبة لهذا النوع يجب أن تحصل على ال "data-large-image" بدل ال "src".

أخبرني أولا هل تريد إن تقوم بعملها لكل المواقع من هذا النوع أم لهذا الموقع فقط، لأن مختلف المواقع يستعملون قيم مختلفة و لن يمكن التعرف عليها...

0
عبد الله عبد الرحمن أضف ردا

حاليا أريدها لهذا الموقع فقط.

0
Voker أضف ردا

جرب إن ناسبك، إن لم يناسبك فغير ما داخل "attr" حسب ما يناسبك.

var imgs = $('img');
for (i = 0; i < imgs.length; i++) {
console.log($(imgs[i]).attr('data-large-image'));
}
0
عبد الله عبد الرحمن أضف ردا

للأسف لست من ملما ب JavaScript إلا قليلا.

الشفرة بعد تشغيلها في Console ال Firebug، حصلت على روابط جميع الصور بنجاح.

لكن ما أريده هو طريقة إظهار جميع الصور غير الظاهرة. يعني بدل الحصول على روابط الصور أود أن تظهر هذه الأخيرة في مكانها في الصفحة.

0
Voker أضف ردا

جرب هذا...

var imgs = $('img');
for (i = 0; i < imgs.length; i++) {
    if (!!$(imgs[i]).attr('data-large-image')) {
        $(imgs[i]).src = $(imgs[i]).attr('data-large-image');
        console.log('Img: ' + i + ' has been set to ' + $(imgs[i]).attr('data-large-image'));
    }
}
0
عبد الله عبد الرحمن أضف ردا

شكرا على كل حال أخي Voker.

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

صعوبة الأمر تكمن في حفظ مئات الصفحات آليا بواسطة إضافة iMacro على متصفح Firefox.

المهم، قمت بحل الأمر بطريقة غير مباشرة عن طريق برمجة برنامج صغير في VB.Net يقوم بتعديل الوسوم (Tags) للشفرة المصدرية لكل صفحة.

هذه خواريزمية العمل:

  • أحمل كل الصفحات (الشفرة المصدرية فقط) باستعمال iMacro.

  • أعدل الصفحة المصدرية للصفحات المحملة.

  • أعود لتحميل الصفحات المعدلة (تحميل تام لها مع كل عناصرها) باستعمال iMacro.

0
Voker أضف ردا

جميل أخي، جيد أنك وجدت ما تبحث عنه.

0
zakariamouhid أضف ردا

code javascript

var imgs = document.getElementsByTagName("img");
for (var i = 0; i < imgs.length; i += 1) {
    console.log(imgs[i].getAttribute("src");
}
0
عبد الله عبد الرحمن أضف ردا

شكرا جزيلا.

كما قلت في ردي على الأخ Voker، فالأمر لم ينجح.

الأمر يشبه تقريبا ما يحدث في ألبومات صور الفيسبوك. فالصور تظهر كلما تصفح المستخدم أكثر.

وأنا أريد طريقة لإظهار الصور جملة واحد أول الأمر.

0
zakariamouhid أضف ردا

ربما روابط الصور موجودة في متغير من نوع مصفوفة في كود javascript

وبعد تفاعل المستخدم يتم إرسال رابط الصورة إلى كود html

وإذا كان كذلك عليك إيجاد ذالك المتغير

0
عبد الله عبد الرحمن أضف ردا

حسب الشفرة المصدرية للصفحة التي أخذتها من Firefox، فروابط الصور موجودة منذ البداية (هذا إن لم أكن مخطئا).

يمكنك قراءة جزء من الشفرة المصدرية الذي أوردته في ردي على الأخ Voker.

0
forra أضف ردا

اخي اعتقد انه فايسبوك يستخدم اجاكس ajax في جلب البيانات و ليس تحمل كلها ضربة واحدة و نفس الشئ للمنشورات...

هنالك الكثير من المواقع تفعل ذلك...بمعنى انها تجلب (او تقوم بتحديث الصفحة) لجزء منها...

0
عبد الله عبد الرحمن أضف ردا

ما قصدته أنا يا أخي هو تشابه الأمر بين الفيسبوك و ذاك الموقع. لكنهما مختلفان في كيفية أداء الأمر.

فالموقع الذي أحببت التعامل معه تكون روابط كل الصور في شفرته منذ البداية، غير بعضها لا يتم إظهاره إلا عندما يتفاعل الزائر مع الصفحة.

0
yahya11 أضف ردا

سوف يقوم بنزول الي اخر الصفحة

$("html, body").animate({ scrollTop: $(document).height() }, 1000);

او عند تحميل الصفحة

$(window).load(function() {

$("html, body").animate({ scrollTop: $(document).height() }, 1000);

});

اوظعها داخل

var imgs = $('img');

for (i = 0; i < imgs.length; i++) {

$("html, body").animate({ scrollTop: $(document).height() }, 1000);

console.log($(imgs[i]).attr('data-large-image'));

}

0
عبد الله عبد الرحمن أضف ردا

شكرا جزيلا أخي.

ليس نزول الصفحة تلقائيا ما أريد. و لكن جلب وإظهار جميع الصور في آن واحد.

0
عبد الله عبد الرحمن أضف ردا

شكرا على كل حال أخي Voker.

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

صعوبة الأمر تكمن في حفظ مئات الصفحات آليا بواسطة إضافة iMacro على متصفح Firefox.

المهم، قمت بحل الأمر بطريقة غير مباشرة عن طريق برمجة برنامج صغير في VB.Net يقوم بتعديل الوسوم (Tags) للشفرة المصدرية لكل صفحة.

هذه خواريزمية العمل:

  • أحمل كل الصفحات (الشفرة المصدرية فقط) باستعمال iMacro.

  • أعدل الصفحة المصدرية للصفحات المحملة.

  • أعود لتحميل الصفحات المعدلة (تحميل تام لها مع كل عناصرها) باستعمال iMacro.