[技巧] 網頁上快速存圖 (二):取得下一頁圖片

繼上一篇 [技巧] 網頁上快速存圖 (一):縮圖變大圖 ,這次要來教的是更進階的技巧。

當我們在看一串圖的時候,有些時候會被分成好幾頁來觀看,如果分頁少一點還可以接受,但是有些網站分頁實在太多,有時候一整套圖十幾張,一頁就分一張,這要抓圖實在有點難,有些人可能會安裝自動分頁軟體來換頁,然後再利用技巧把圖片放大,這是種解決辦法,但是當分頁軟體沒辦法幫助到你的時候,也只能自力救濟了。

這次應用到的技巧一樣是 Jquery ,如果想要學習 Jquery 可以透過一些速成書籍或是線上教學網站 http://learn.jquery.com/ 來學習,或是看中文版的 學習 jQuery 從入門到精通只要兩小時!投影片。

這次的範例網站選了一個圖片很多的 完美女人,這網站就是典型的一張圖一張網頁,要抓圖的方式也是非常簡單。

首先先取得下一頁的網址。以範例文章中的網址來看,利用 瀏覽器 F12   的開發工具,先針對他的分頁結構下手

想要抓取下一頁的路徑,先要想辦法取得分頁的這個網頁物件,這個範例非常的標準就是,他的分頁有加上 id 因此非常好取得,就是 #pagelist ,接著我們需要建立一個function 來取得下一頁的分頁網址

就像這樣, findNext(content) ,content 這個變數的用意就是要接收來自不同分頁的內容,取得不同分頁的下一頁,a:last 就是抓該分頁連結的最後一個,最後一個就是下一頁的內容網址。

接著要做的就是取得該分頁的內容,有了分頁的下一頁網址就可以取得下一頁的內容,要做的事情也是非常簡單,就是利用 $.get 來取得

就像這樣,取得之後立刻新增到該頁裡面,這邊利用 clone() 的函式,可以不用管 img的結構直接加入在網頁中。

接著只要將程式一起套起來就可以嚕,用法很簡單跟之前的做法一樣

要把程式串起來讓他可以持續的抓下一頁的內容,只需要在 getPage 裡面加一小段,並且判斷他是不是已經到了最後一頁,每個網頁的判斷方式都不同,這個範例網站中的最後一頁就是網址連結最後方會是一個 # ,所以只要最後一個連結是 # 程式就會停止了。

要讓程式開始只需要在一開始的時候把本頁下一頁載入給 getPage 就可以了。

這樣一樣在 Chrome 裡面使用 Console 貼上上面的Code 就可以一次取得所有的圖片嚕。

 

我是米薩克,想了解更多可以點選  關於我