السلام عليكم ورحمة الله،
أنا أريد شفرة JavaScript تدمج مثلا مع تطبيق Greasemonkey، حيث تسمح بجلب وإظهار (Load all images at once) جميع الصور في الصفحة.
المشكل هو أن الموقع الذي أزوره يستعمل تقنية Lazy Loading التي تجلب الصور تفاعليا مع المستخدم (كلما نزلنا إلى أسفل الصفحة مثلا يتم جلب صور جديدة، و هكذا دواليك). وبالتالي تفاعل الزائر يصبح ضروريا، وهذا ما لا أريده.
كما قلت سابقا، ما أريده هو شفرة JS تقوم بجلب جميع الصور دفعة واحدة، دون انتظار تفاعل من المستخدم.
الصفحة التالية كمثال:
شكرا جزيلا.
إليك شفرتي بناء على ما قلت... إن كان هذا قصدك.
var imgs = $('img');
for (i = 0; i < imgs.length; i++) {
console.log(imgs[i].src);
}
الشفرة تعمل ب jQuery، و هي تأخد الصور و الروابط من ال DOM إذ أن ال Lazy loading لا يؤثر عليها، إن كان سؤالك غير هذا فأخبرني.
شكرا جزيلا.
لكن هذه الشفرة لم تقدم المطلوب.
هناك صور في الصفحة التي أزورها، لا يتم تحميلها (Load) سوى بعد إنزال الصفحة والوصول إليها.
مثلا، يوجد إطار تحمل فيه صور، وتنتظر أخرى تفاعلا من المستخدم.
هاتين الشفرتين من الصفحة مثلا تبينان الفرق بين الصور المحملة تلقائيا، و الأخرى المنتظرة:
<a class="photoset-link" data-fancybox-group="photoset-gallery-SZDBYCCII7RIYKB" href="/file/FAYGOXQII96WU7T/" data-fancybox-href="
<a class="photoset-link" data-fancybox-group="photoset-gallery-SZDBYCCII7RIYKB" href="/file/F774V10II96WU6E/" data-fancybox-href="
بالنسبة لهذا النوع يجب أن تحصل على ال "data-large-image" بدل ال "src".
أخبرني أولا هل تريد إن تقوم بعملها لكل المواقع من هذا النوع أم لهذا الموقع فقط، لأن مختلف المواقع يستعملون قيم مختلفة و لن يمكن التعرف عليها...
جرب إن ناسبك، إن لم يناسبك فغير ما داخل "attr" حسب ما يناسبك.
var imgs = $('img');
for (i = 0; i < imgs.length; i++) {
console.log($(imgs[i]).attr('data-large-image'));
}
للأسف لست من ملما ب JavaScript إلا قليلا.
الشفرة بعد تشغيلها في Console ال Firebug، حصلت على روابط جميع الصور بنجاح.
لكن ما أريده هو طريقة إظهار جميع الصور غير الظاهرة. يعني بدل الحصول على روابط الصور أود أن تظهر هذه الأخيرة في مكانها في الصفحة.
جرب هذا...
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'));
}
}
شكرا على كل حال أخي Voker.
ما كنت أوده هو حفظ الصفحة في القرص الصلب. ولهذا، كان يلزم الصفحة أن تجلب جميع الصور وتظهرها، ليتم بعدها حفظ الصفحة بجميع عناصرها.
صعوبة الأمر تكمن في حفظ مئات الصفحات آليا بواسطة إضافة iMacro على متصفح Firefox.
المهم، قمت بحل الأمر بطريقة غير مباشرة عن طريق برمجة برنامج صغير في VB.Net يقوم بتعديل الوسوم (Tags) للشفرة المصدرية لكل صفحة.
هذه خواريزمية العمل:
أحمل كل الصفحات (الشفرة المصدرية فقط) باستعمال iMacro.
أعدل الصفحة المصدرية للصفحات المحملة.
أعود لتحميل الصفحات المعدلة (تحميل تام لها مع كل عناصرها) باستعمال iMacro.
code javascript
var imgs = document.getElementsByTagName("img");
for (var i = 0; i < imgs.length; i += 1) {
console.log(imgs[i].getAttribute("src");
}
شكرا جزيلا.
كما قلت في ردي على الأخ Voker، فالأمر لم ينجح.
الأمر يشبه تقريبا ما يحدث في ألبومات صور الفيسبوك. فالصور تظهر كلما تصفح المستخدم أكثر.
وأنا أريد طريقة لإظهار الصور جملة واحد أول الأمر.
ربما روابط الصور موجودة في متغير من نوع مصفوفة في كود javascript
وبعد تفاعل المستخدم يتم إرسال رابط الصورة إلى كود html
وإذا كان كذلك عليك إيجاد ذالك المتغير
حسب الشفرة المصدرية للصفحة التي أخذتها من Firefox، فروابط الصور موجودة منذ البداية (هذا إن لم أكن مخطئا).
يمكنك قراءة جزء من الشفرة المصدرية الذي أوردته في ردي على الأخ Voker.
اخي اعتقد انه فايسبوك يستخدم اجاكس ajax في جلب البيانات و ليس تحمل كلها ضربة واحدة و نفس الشئ للمنشورات...
هنالك الكثير من المواقع تفعل ذلك...بمعنى انها تجلب (او تقوم بتحديث الصفحة) لجزء منها...
ما قصدته أنا يا أخي هو تشابه الأمر بين الفيسبوك و ذاك الموقع. لكنهما مختلفان في كيفية أداء الأمر.
فالموقع الذي أحببت التعامل معه تكون روابط كل الصور في شفرته منذ البداية، غير بعضها لا يتم إظهاره إلا عندما يتفاعل الزائر مع الصفحة.
سوف يقوم بنزول الي اخر الصفحة
$("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'));
}
شكرا جزيلا أخي.
ليس نزول الصفحة تلقائيا ما أريد. و لكن جلب وإظهار جميع الصور في آن واحد.
شكرا على كل حال أخي Voker.
ما كنت أوده هو حفظ الصفحة في القرص الصلب. ولهذا، كان يلزم الصفحة أن تجلب جميع الصور وتظهرها، ليتم بعدها حفظ الصفحة بجميع عناصرها.
صعوبة الأمر تكمن في حفظ مئات الصفحات آليا بواسطة إضافة iMacro على متصفح Firefox.
المهم، قمت بحل الأمر بطريقة غير مباشرة عن طريق برمجة برنامج صغير في VB.Net يقوم بتعديل الوسوم (Tags) للشفرة المصدرية لكل صفحة.
هذه خواريزمية العمل:
أحمل كل الصفحات (الشفرة المصدرية فقط) باستعمال iMacro.
أعدل الصفحة المصدرية للصفحات المحملة.
أعود لتحميل الصفحات المعدلة (تحميل تام لها مع كل عناصرها) باستعمال iMacro.
التعليقات